apply class for dynamic elements (#7652)

src/compiler/compile/css/Selector.ts

@@ -311,7 +311,7 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 				return BlockAppliesToNode.NotPossible;
 			}
 		} else if (selector.type === 'TypeSelector') {
-			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*') return BlockAppliesToNode.NotPossible;
+			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*' && !node.is_dynamic_element) return BlockAppliesToNode.NotPossible;
 		} else {
 			return BlockAppliesToNode.UnknownSelectorType;
 		}

test/css/samples/dynamic-element-tag/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/dynamic-element-tag/expected.css

@@ -0,0 +1 @@
+div.svelte-xyz.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>p.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz span.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>span.svelte-xyz>b.svelte-xyz{color:red}h2.svelte-xyz span b.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz b.svelte-xyz.svelte-xyz{color:red}

test/css/samples/dynamic-element-tag/expected.html

@@ -0,0 +1,4 @@
+<div class="svelte-xyz"></div>
+<h2 class="svelte-xyz">
+	<div class="svelte-xyz"><b class="svelte-xyz">text</b></div>
+</h2>

test/css/samples/dynamic-element-tag/input.svelte

@@ -0,0 +1,32 @@
+<script>
+	export let element = 'div';
+</script>
+
+<svelte:element this={element} />
+
+<h2>
+	<svelte:element this={element}>
+		<b>text</b>
+	</svelte:element>
+</h2>
+
+<style>
+	div {
+		color: red;
+	}
+	h2 > p {
+		color: red;
+	}
+	h2 span {
+		color: red;
+	}
+	h2 > span > b {
+		color: red;
+	}
+	h2 span b {
+		color: red;
+	}
+	h2 b {
+		color: red;
+	}
+</style>