diff --git a/src/compile/nodes/Attribute.ts b/src/compile/nodes/Attribute.ts
index 53996469e910..0165dc98fb81 100644
--- a/src/compile/nodes/Attribute.ts
+++ b/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';
 
diff --git a/src/shared/dom.js b/src/shared/dom.js
index 03aaf8aaeb39..3b823cfaae93 100644
--- a/src/shared/dom.js
+++ b/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);
 }
diff --git a/test/custom-elements/samples/props/main.html b/test/custom-elements/samples/props/main.html
new file mode 100644
index 000000000000..db8465591e1c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/custom-elements/samples/props/my-widget.html b/test/custom-elements/samples/props/my-widget.html
new file mode 100644
index 000000000000..b4ed9b38a6b2
--- /dev/null
+++ b/test/custom-elements/samples/props/my-widget.html
@@ -0,0 +1,14 @@
+<p>{items.length} items</p>
+<p>{items.join(', ')}</p>
+
+<script>
+	export default {
+		tag: 'my-widget',
+
+		data() {
+			return {
+				items: []
+			};
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/custom-elements/samples/props/test.js b/test/custom-elements/samples/props/test.js
new file mode 100644
index 000000000000..1e95fe3ad281
--- /dev/null
+++ b/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');
+}
\ No newline at end of file