fix to apply class directive for svelte:element (#7531)

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);

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>

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>
+	`
+};

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}