fix: render boolean attribute values as empty strings for XHTML compliance (#17648)

.changeset/tired-cities-wink.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: render boolean attribute values as empty strings for XHTML compliance

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

@@ -256,10 +256,7 @@ export function RegularElement(node, context) {
 				}
 
 				if (name !== 'class' || value) {
-					context.state.template.set_prop(
-						attribute.name,
-						is_boolean_attribute(name) && value === true ? undefined : value === true ? '' : value
-					);
+					context.state.template.set_prop(attribute.name, value === true ? '' : value);
 				}
 			} else if (name === 'autofocus') {
 				let { value } = build_attribute_value(attribute.value, context);

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

@@ -235,13 +235,7 @@ export function build_element_attributes(node, context, transform) {
 
 				if (name !== 'class' || literal_value) {
 					context.state.template.push(
-						b.literal(
-							` ${attribute.name}${
-								is_boolean_attribute(name) && literal_value === true
-									? ''
-									: `="${literal_value === true ? '' : String(literal_value)}"`
-							}`
-						)
+						b.literal(` ${attribute.name}="${literal_value === true ? '' : String(literal_value)}"`)
 					);
 				}
 

packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js

@@ -1,5 +1,3 @@
 import { test } from '../../test';
 
-export default test({
-	skip: true
-});
+export default test({});

packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js

@@ -3,7 +3,7 @@ import * as $ from 'svelte/internal/server';
 export default function Skip_static_subtree($$renderer, $$props) {
 	let { title, content } = $$props;
 
-	$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus/></div> <div><source muted/></div> <select>`);
+	$$renderer.push(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus=""/></div> <div><source muted=""/></div> <select>`);
 
 	$$renderer.option({ value: 'a' }, ($$renderer) => {
 		$$renderer.push(`a`);