use props when passing data to custom elements (#875)

Author: Rich-Harris

src/compile/nodes/Attribute.ts

@@ -130,9 +130,11 @@ export default class Attribute extends Node {
 		// xlink is a special case... we could maybe extend this to generic
 		// namespaced attributes but I'm not sure that's applicable in
 		// HTML5?
-		const method = name.slice(0, 6) === 'xlink:'
-			? '@setXlinkAttribute'
-			: '@setAttribute';
+		const method = /-/.test(node.name)
+			? '@setCustomElementData'
+			: name.slice(0, 6) === 'xlink:'
+				? '@setXlinkAttribute'
+				: '@setAttribute';
 
 		const isLegacyInputType = this.compiler.options.legacy && name === 'type' && this.parent.name === 'input';
 

src/shared/dom.js

@@ -96,6 +96,16 @@ export function setAttributes(node, attributes) {
 	}
 }
 
+export function setCustomElementData(node, prop, value) {
+	if (prop in node) {
+		node[prop] = value;
+	} else if (value) {
+		setAttribute(node, prop, value);
+	} else {
+		removeAttribute(node, prop);
+	}
+}
+
 export function removeAttribute(node, attribute) {
 	node.removeAttribute(attribute);
 }

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

@@ -0,0 +1,15 @@
+<my-widget class="foo" {items}/>
+
+<script>
+	import './my-widget.html';
+
+	export default {
+		tag: 'custom-element',
+
+		data() {
+			return {
+				items: ['a', 'b', 'c']
+			};
+		}
+	};
+</script>

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

@@ -0,0 +1,9 @@
+<p>{(items || []).length} items</p>
+<p>{(items || []).join(', ')}</p>
+<p>{JSON.stringify(items)}</p>
+
+<script>
+	export default {
+		tag: 'my-widget'
+	};
+</script>

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

@@ -0,0 +1,23 @@
+import * as assert from 'assert';
+import CustomElement from './main.html';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const widget = el.shadowRoot.querySelector('my-widget');
+
+	const [p1, p2] = widget.shadowRoot.querySelectorAll('p');
+
+	assert.equal(p1.textContent, '3 items');
+	assert.equal(p2.textContent, 'a, b, c');
+
+	el.items = ['d', 'e', 'f', 'g', 'h'];
+
+	assert.equal(p1.textContent, '5 items');
+	assert.equal(p2.textContent, 'd, e, f, g, h');
+}