diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 911f96a275..03f076df5e 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -148,7 +148,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);
}
diff --git a/test/custom-elements/samples/props/main.svelte b/test/custom-elements/samples/props/main.svelte
index 80b483bf6e..cf47b436b5 100644
--- a/test/custom-elements/samples/props/main.svelte
+++ b/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;
-
{items.length} items
{items.join(', ')}
+{flag1 ? 'flagged (dynamic attribute)' : 'not flagged'}
+{flag2 ? 'flagged (static attribute)' : 'not flagged'}
diff --git a/test/custom-elements/samples/props/test.js b/test/custom-elements/samples/props/test.js index fc8c01c623..41ca77d29d 100644 --- a/test/custom-elements/samples/props/test.js +++ b/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)'); }