From 6776fe03fdcf06602ff816c269e2e73df728aa27 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 18 May 2022 12:12:10 +0900
Subject: [PATCH] fix to apply class directive for svelte:element (#7531)

---
 .../compile/render_dom/wrappers/Element/index.ts |  2 +-
 .../dynamic-element-class-directive/Link.svelte  | 13 +++++++++++++
 .../dynamic-element-class-directive/_config.js   | 11 +++++++++++
 .../dynamic-element-class-directive/main.svelte  | 16 ++++++++++++++++
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/Link.svelte
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 382bdfaec10..eed7c6f4eee 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1048,7 +1048,7 @@ export default class ElementWrapper extends Wrapper {
 
 			block.chunks.hydrate.push(updater);
 
-			if (has_spread) {
+			if (has_spread || this.node.is_dynamic_element) {
 				block.chunks.update.push(updater);
 			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
 				const all_dependencies = this.class_dependencies.concat(...dependencies);
diff --git a/test/runtime/samples/dynamic-element-class-directive/Link.svelte b/test/runtime/samples/dynamic-element-class-directive/Link.svelte
new file mode 100644
index 00000000000..c58b3d1dc5c
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/Link.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let item;
+</script>
+
+<svelte:element this="div" class:active={true}>
+	{item.text}
+</svelte:element>
+
+<style>
+	.active {
+		color: red;
+	}
+</style>
diff --git a/test/runtime/samples/dynamic-element-class-directive/_config.js b/test/runtime/samples/dynamic-element-class-directive/_config.js
new file mode 100644
index 00000000000..1106467919a
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<div class="svelte-1vsuzn0 active">foo</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo1</div>
+		<div class="svelte-1vsuzn0 active">foo2</div>
+		<div class="svelte-1vsuzn0 active">foo3</div>
+	`
+};
diff --git a/test/runtime/samples/dynamic-element-class-directive/main.svelte b/test/runtime/samples/dynamic-element-class-directive/main.svelte
new file mode 100644
index 00000000000..58e9303100b
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Link from "./Link.svelte";
+	let foo = [
+		{ text: "foo0" },
+		{ text: "foo1" },
+		{ text: "foo2" },
+		{ text: "foo3" },
+	];
+</script>
+
+<Link item={{ text: "foo" }} />
+<Link item={foo[0]} />
+<Link bind:item={foo[0]} />
+{#each foo as item}
+	<Link bind:item />
+{/each}