replace all invalid characters in attribute names when creating variables (fixes #470)

Author: Rich-Harris

src/generators/dom/visitors/Element/Attribute.js

@@ -43,7 +43,7 @@ export default function visitAttribute ( generator, block, state, node, attribut
 			);
 		}
 
-		const last = `last_${state.parentNode}_${name.replace( /-/g, '_')}`;
+		const last = `last_${state.parentNode}_${name.replace( /[^a-zA-Z_$]/g, '_')}`;
 		block.builders.create.addLine( `var ${last} = ${value};` );
 
 		const isSelectValueAttribute = name === 'value' && state.parentNodeName === 'select';

test/runtime/samples/attribute-namespaced/_config.js

@@ -0,0 +1,14 @@
+export default {
+	data: { foo: 'bar' },
+
+	html: `
+		<svg>
+			<use xlink:href="#bar"/>
+		</svg>
+	`,
+
+	test ( assert, component, target ) {
+		const use = target.querySelector( 'use' );
+		assert.equal( use.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ), '#bar' );
+	}
+};

test/runtime/samples/attribute-namespaced/main.html

@@ -0,0 +1,3 @@
+<svg>
+	<use xlink:href="#{{foo}}"/>
+</svg>