Fix boolean attributes on custom elements (#5951)

src/runtime/internal/dom.ts

@@ -116,7 +116,7 @@ export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attrib
 
 export function set_custom_element_data(node, prop, value) {
 	if (prop in node) {
-		node[prop] = value;
+		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
 	} else {
 		attr(node, prop, value);
 	}

test/custom-elements/samples/props/main.svelte

@@ -4,6 +4,7 @@
 	import './my-widget.svelte';
 
 	export let items = ['a', 'b', 'c'];
+	export let flagged = false;
 </script>
 
-<my-widget class="foo" {items}/>
+<my-widget class="foo" {items} flag1={flagged} flag2 />

test/custom-elements/samples/props/my-widget.svelte

@@ -2,7 +2,11 @@
 
 <script>
 	export let items = [];
+	export let flag1 = false;
+	export let flag2 = false;
 </script>
 
 <p>{items.length} items</p>
 <p>{items.join(', ')}</p>
+<p>{flag1 ? 'flagged (dynamic attribute)' : 'not flagged'}</p>
+<p>{flag2 ? 'flagged (static attribute)' : 'not flagged'}</p>

test/custom-elements/samples/props/test.js

@@ -11,13 +11,17 @@ export default function (target) {
 	const el = target.querySelector('custom-element');
 	const widget = el.shadowRoot.querySelector('my-widget');
 
-	const [p1, p2] = widget.shadowRoot.querySelectorAll('p');
+	const [p1, p2, p3, p4] = widget.shadowRoot.querySelectorAll('p');
 
 	assert.equal(p1.textContent, '3 items');
 	assert.equal(p2.textContent, 'a, b, c');
+	assert.equal(p3.textContent, 'not flagged');
+	assert.equal(p4.textContent, 'flagged (static attribute)');
 
 	el.items = ['d', 'e', 'f', 'g', 'h'];
+	el.flagged = true;
 
 	assert.equal(p1.textContent, '5 items');
 	assert.equal(p2.textContent, 'd, e, f, g, h');
+	assert.equal(p3.textContent, 'flagged (dynamic attribute)');
 }