From e2ef2b8731a897b36d81d130c78cd4a9019aa41f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 11 Sep 2022 21:14:47 +0200
Subject: [PATCH] apply class for dynamic elements (#7652)

---
 src/compiler/compile/css/Selector.ts          |  2 +-
 .../samples/dynamic-element-tag/_config.js    |  3 ++
 .../samples/dynamic-element-tag/expected.css  |  1 +
 .../samples/dynamic-element-tag/expected.html |  4 +++
 .../samples/dynamic-element-tag/input.svelte  | 32 +++++++++++++++++++
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 test/css/samples/dynamic-element-tag/_config.js
 create mode 100644 test/css/samples/dynamic-element-tag/expected.css
 create mode 100644 test/css/samples/dynamic-element-tag/expected.html
 create mode 100644 test/css/samples/dynamic-element-tag/input.svelte

diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index d61ba1f510..17302c4abd 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/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;
 		}
diff --git a/test/css/samples/dynamic-element-tag/_config.js b/test/css/samples/dynamic-element-tag/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/dynamic-element-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/dynamic-element-tag/expected.css b/test/css/samples/dynamic-element-tag/expected.css
new file mode 100644
index 0000000000..6af254e948
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/test/css/samples/dynamic-element-tag/expected.html b/test/css/samples/dynamic-element-tag/expected.html
new file mode 100644
index 0000000000..509ad1d839
--- /dev/null
+++ b/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>
diff --git a/test/css/samples/dynamic-element-tag/input.svelte b/test/css/samples/dynamic-element-tag/input.svelte
new file mode 100644
index 0000000000..6e8851b3f9
--- /dev/null
+++ b/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>