diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js
index 7f55d84ec9..c4bf6c6af4 100644
--- 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}' )`;
-}
\ No newline at end of file
+}
diff --git a/test/runtime/samples/element-invalid-name/_config.js b/test/runtime/samples/element-invalid-name/_config.js
new file mode 100644
index 0000000000..af6e4933ce
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..0ff9794228
--- /dev/null
+++ b/test/runtime/samples/element-invalid-name/main.html
@@ -0,0 +1 @@
+<foo-bar>Hello</foo-bar>