From 7042755e7ab93b9aedae14574369533d8754c2c2 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Fri, 30 Apr 2021 08:48:27 -0700
Subject: [PATCH] fix setting boolean attributes on custom elements (#6073)

---
 src/runtime/internal/dom.ts                         | 2 +-
 test/custom-elements/samples/props/main.svelte      | 3 ++-
 test/custom-elements/samples/props/my-widget.svelte | 4 ++++
 test/custom-elements/samples/props/test.js          | 6 +++++-
 4 files changed, 12 insertions(+), 3 deletions(-)

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;
 </script>
 
-<my-widget class="foo" {items}/>
+<my-widget class="foo" {items} flag1={flagged} flag2 />
diff --git a/test/custom-elements/samples/props/my-widget.svelte b/test/custom-elements/samples/props/my-widget.svelte
index cf512e0ff8..970acf84b2 100644
--- a/test/custom-elements/samples/props/my-widget.svelte
+++ b/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>
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)');
 }