Merge pull request #517 from sveltejs/gh-516

Replace invalid characters in element names when creating variables
sveltejs · Apr 20, 2017 · a096052 · a096052
2 parents 3dafc39 + 2bc223a
commit a096052
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/generators/dom/visitors/Element/Element.js b/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}' )`;
-}
+}
diff --git a/test/runtime/samples/element-invalid-name/_config.js b/test/runtime/samples/element-invalid-name/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<foo-bar>Hello</foo-bar>
+	`
+}
diff --git a/test/runtime/samples/element-invalid-name/main.html b/test/runtime/samples/element-invalid-name/main.html
@@ -0,0 +1 @@
+<foo-bar>Hello</foo-bar>