From 3d30067370e23f3c9c81bd80a897889743cb6fac Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 8 Oct 2024 22:38:51 +0200
Subject: [PATCH] fix: mark custom element with virtual class attribute as
 dynamic (#13435)

Closes #13426
---
 .changeset/tiny-ads-press.md                          |  5 +++++
 .../src/compiler/phases/1-parse/state/element.js      |  3 ++-
 .../svelte/src/compiler/phases/2-analyze/index.js     |  6 +++++-
 .../phases/2-analyze/visitors/RegularElement.js       |  2 ++
 packages/svelte/src/compiler/phases/nodes.js          |  2 +-
 packages/svelte/src/compiler/types/template.d.ts      |  1 +
 .../samples/custom-element-svelte-class/_config.js    |  9 +++++++++
 .../samples/custom-element-svelte-class/main.svelte   | 11 +++++++++++
 8 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tiny-ads-press.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/main.svelte

diff --git a/.changeset/tiny-ads-press.md b/.changeset/tiny-ads-press.md
new file mode 100644
index 0000000000..cee3bd54bc
--- /dev/null
+++ b/.changeset/tiny-ads-press.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark custom element with virtual class attribute as dynamic
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index f3c723783b..9082b76c49 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -151,7 +151,8 @@ export default function element(parser) {
 						svg: false,
 						mathml: false,
 						scoped: false,
-						has_spread: false
+						has_spread: false,
+						path: []
 					},
 					parent: null
 				}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index e363ea9951..477fb9ca17 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -9,7 +9,7 @@ import { extract_identifiers, is_text_attribute } from '../../utils/ast.js';
 import * as b from '../../utils/builders.js';
 import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
-import { create_attribute } from '../nodes.js';
+import { create_attribute, is_custom_element_node } from '../nodes.js';
 import { analyze_css } from './css/css-analyze.js';
 import { prune } from './css/css-prune.js';
 import { hash, is_rune } from '../../../utils.js';
@@ -67,6 +67,7 @@ import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { UseDirective } from './visitors/UseDirective.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
 import is_reference from 'is-reference';
+import { mark_subtree_dynamic } from './visitors/shared/fragment.js';
 
 /**
  * @type {Visitors}
@@ -743,6 +744,9 @@ export function analyze_component(root, source, options) {
 							}
 						])
 					);
+					if (is_custom_element_node(element) && element.attributes.length === 1) {
+						mark_subtree_dynamic(element.metadata.path);
+					}
 				}
 			}
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index af4587cdb2..49a642eb49 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -22,6 +22,8 @@ export function RegularElement(node, context) {
 
 	check_element(node, context.state);
 
+	node.metadata.path = [...context.path];
+
 	context.state.analysis.elements.push(node);
 
 	// Special case: Move the children of <textarea> into a value attribute if they are dynamic
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 54ac4b6b4b..ead525aaa1 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -23,7 +23,7 @@ export function is_element_node(node) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @returns {boolean}
+ * @returns {node is AST.RegularElement}
  */
 export function is_custom_element_node(node) {
 	return node.type === 'RegularElement' && node.name.includes('-');
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 9da0320432..fd1824d3b3 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -303,6 +303,7 @@ export namespace AST {
 			/** `true` if contains a SpreadAttribute */
 			has_spread: boolean;
 			scoped: boolean;
+			path: SvelteNode[];
 		};
 	}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
new file mode 100644
index 0000000000..0069a7dfd7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [my_element, my_element_1] = target.querySelectorAll('my-element');
+		assert.equal(my_element.classList.contains('svelte-1koh33s'), true);
+		assert.equal(my_element_1.classList.contains('svelte-1koh33s'), true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/main.svelte
new file mode 100644
index 0000000000..df28635301
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/main.svelte
@@ -0,0 +1,11 @@
+<div>
+	<my-element></my-element>
+</div>
+<my-element></my-element>
+
+
+<style>
+	my-element{
+		background: red;
+	}
+</style>
\ No newline at end of file