XHTML compliance

.changeset/forty-llamas-unite.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: XHTML compliance

packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js

@@ -104,10 +104,11 @@ function stringify(item) {
 		if (value !== undefined) str += `="${escape_html(value, true)}"`;
 	}
 
+	if (is_void(item.name)) {
+		str += '/>'; // XHTML compliance
+	} else {
 		str += `>`;
 		str += item.children.map(stringify).join('');
-
-	if (!is_void(item.name)) {
 		str += `</${item.name}>`;
 	}
 

packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js

@@ -24,9 +24,11 @@ export function RegularElement(node, context) {
 			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
 	};
 
+	const node_is_void = is_void(node.name);
+
 	context.state.template.push(b.literal(`<${node.name}`));
 	const body = build_element_attributes(node, { ...context, state });
-	context.state.template.push(b.literal('>'));
+	context.state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
 
 	if ((node.name === 'script' || node.name === 'style') && node.fragment.nodes.length === 1) {
 		context.state.template.push(
@@ -94,7 +96,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (!is_void(node.name)) {
+	if (!node_is_void) {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 

packages/svelte/src/internal/client/dom/reconciler.js

@@ -1,6 +1,6 @@
 /** @param {string} html */
 export function create_fragment_from_html(html) {
 	var elem = document.createElement('template');
-	elem.innerHTML = html;
+	elem.innerHTML = html.replaceAll('<!>', '<!---->'); // XHTML compliance
 	return elem.content;
 }