Merge pull request #1408 from sveltejs/gh-1407

mark elements with refs as ineligible for innerhtml

src/compile/nodes/Element.ts

@@ -191,6 +191,10 @@ export default class Element extends Node {
 			block.outros += 1;
 		}
 
+		if (this.ref) {
+			this.parent.cannotUseInnerHTML();
+		}
+
 		const valueAttribute = this.attributes.find((attribute: Attribute) => attribute.name === 'value');
 
 		// special case — in a case like this...

test/runtime/samples/refs-no-innerhtml/_config.js

@@ -0,0 +1,7 @@
+export default {
+	html: '<div><canvas></canvas></div>',
+	test ( assert, component, target ) {
+		const canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+	}
+};

test/runtime/samples/refs-no-innerhtml/main.html

@@ -0,0 +1 @@
+<div><canvas ref:foo></canvas></div>