dynamic component bindings

src/validate/html/validateElement.ts

@@ -14,7 +14,7 @@ export default function validateElement(
 	elementStack: Node[]
 ) {
 	const isComponent =
-		node.name === ':Self' || validator.components.has(node.name);
+		node.name === ':Self' || node.name === ':Switch' || validator.components.has(node.name);
 
 	if (!isComponent && /^[A-Z]/.test(node.name[0])) {
 		// TODO upgrade to validator.error in v2

test/runtime/samples/dynamic-component-bindings/Bar.html

@@ -0,0 +1,2 @@
+<p>bar</p>
+<input type='checkbox' bind:checked='z'>

test/runtime/samples/dynamic-component-bindings/Foo.html

@@ -0,0 +1,2 @@
+<p>foo</p>
+<input bind:value='y'>

test/runtime/samples/dynamic-component-bindings/_config.js

@@ -0,0 +1,33 @@
+export default {
+	data: {
+		x: true
+	},
+
+	html: `
+		<p>foo</p>
+		<input>
+	`,
+
+	test(assert, component, target, window) {
+		let input = target.querySelector('input');
+		input.value = 'abc';
+		input.dispatchEvent(new window.Event('input'));
+
+		assert.equal(component.get('y'), 'abc');
+
+		component.set({
+			x: false
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>bar</p>
+			<input type='checkbox'>
+		`);
+
+		input = target.querySelector('input');
+		input.checked = true;
+		input.dispatchEvent(new window.Event('change'));
+
+		assert.equal(component.get('z'), true);
+	}
+};

test/runtime/samples/dynamic-component-bindings/main.html

@@ -0,0 +1,12 @@
+<:Switch { x ? Foo : Bar } bind:y bind:z/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export default {
+		data() {
+			return { Foo, Bar };
+		}
+	};
+</script>