handle boolean attributes

Author: Rich-Harris

src/shared/dom.js

@@ -87,8 +87,12 @@ export function setAttribute(node, attribute, value) {
 
 export function setAttributes(node, attributes) {
 	for (var key in attributes) {
-		if (attributes[key] === undefined) removeAttribute(node, key);
-		else setAttribute(node, key, attributes[key]);
+		if (key in node) {
+			node[key] = attributes[key];
+		} else {
+			if (attributes[key] === undefined) removeAttribute(node, key);
+			else setAttribute(node, key, attributes[key]);
+		}
 	}
 }
 

test/runtime/samples/spread-element-boolean/_config.js

@@ -0,0 +1,27 @@
+export default {
+	data: {
+		props: {
+			disabled: true
+		}
+	},
+
+	html: `
+		<button disabled>click me</button>
+	`,
+
+	test(assert, component, target) {
+		const button = target.querySelector('button');
+
+		assert.ok(button.disabled);
+
+		component.set({
+			props: { disabled: false }
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>click me</button>`
+		);
+		assert.ok(!button.disabled);
+	},
+};

test/runtime/samples/spread-element-boolean/main.html

@@ -0,0 +1 @@
+<button {{...props}} >click me</button>