Merge pull request #517 from sveltejs/gh-516

Replace invalid characters in element names when creating variables

Author: Conduitry

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

@@ -34,7 +34,7 @@ export default function visitElement ( generator, block, state, node ) {
 		return visitComponent( generator, block, state, node );
 	}
 
-	const name = block.getUniqueName( node.name );
+	const name = block.getUniqueName( node.name.replace( /[^a-zA-Z_$]/g, '_' ) );
 
 	const childState = Object.assign( {}, state, {
 		isTopLevel: false,
@@ -136,4 +136,4 @@ function getRenderStatement ( generator, namespace, name ) {
 	}
 
 	return `${generator.helper( 'createElement' )}( '${name}' )`;
-}
+}

test/runtime/samples/element-invalid-name/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<foo-bar>Hello</foo-bar>
+	`
+}

test/runtime/samples/element-invalid-name/main.html

@@ -0,0 +1 @@
+<foo-bar>Hello</foo-bar>