diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index c6da772451..a97844f8df 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -129,7 +129,8 @@ export default function dom ( parsed, source, options ) {
 
 	const state = {
 		namespace,
-		target: null
+		target: null,
+		isTopLevel: true
 	};
 
 	parsed.html.children.forEach( node => {
diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js
index 2f286a3e53..b2c6e9de8f 100644
--- a/src/generators/dom/visitors/Element.js
+++ b/src/generators/dom/visitors/Element.js
@@ -76,7 +76,7 @@ export default function visitElement ( generator, fragment, state, node ) {
 		render = `var ${name} = ${generator.helper( 'createElement' )}( '${node.name}' );`;
 	}
 
-	if ( generator.cssId && !state.elementDepth ) {
+	if ( generator.cssId && state.isTopLevel ) {
 		render += `\n${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );`;
 	}
 
@@ -99,7 +99,7 @@ export default function visitElement ( generator, fragment, state, node ) {
 	fragment.createMountStatement( name, state.target );
 
 	const childState = Object.assign( {}, state, {
-		elementDepth: state.elementDepth + 1,
+		isTopLevel: false,
 		target: name,
 		namespace: local.namespace
 	});