fix: mark custom element with virtual class attribute as dynamic (#13435)

Closes #13426

Author: paoloricciuti

.changeset/tiny-ads-press.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: mark custom element with virtual class attribute as dynamic

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
 				}

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

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

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

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[];
 		};
 	}
 

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

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>