fix: add css hash to custom element rendered with svelte:element

Author: paoloricciuti

.changeset/chilly-carpets-switch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add css hash to custom element rendered with `svelte:element`

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -129,15 +129,20 @@ export function set_xlink_attribute(dom, attribute, value) {
  * @param {any} node
  * @param {string} prop
  * @param {any} value
+ * @param {string} [css_hash]
  */
-export function set_custom_element_data(node, prop, value) {
+export function set_custom_element_data(node, prop, value, css_hash) {
 	if (prop in node) {
 		var curr_val = node[prop];
 		var next_val = typeof curr_val === 'boolean' && value === '' ? true : value;
 		if (typeof curr_val !== 'object' || curr_val !== next_val) {
 			node[prop] = next_val;
 		}
 	} else {
+		if (css_hash && css_hash.length !== 0 && prop === 'class') {
+			if (value) value += ' ';
+			value += css_hash;
+		}
 		set_attribute(node, prop, value);
 	}
 }
@@ -320,7 +325,7 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
 		}
 
 		for (key in next) {
-			set_custom_element_data(node, key, next[key]);
+			set_custom_element_data(node, key, next[key], css_hash);
 		}
 
 		return next;

packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js

@@ -0,0 +1,14 @@
+import { ok, test } from '../../test';
+
+export default test({
+	html: `<custom-element class="red svelte-p153w3"></custom-element><custom-element class="red svelte-p153w3"></custom-element>`,
+
+	async test({ assert, target }) {
+		const [el, el2] = target.querySelectorAll('custom-element');
+		ok(el);
+		ok(el2);
+
+		assert.deepEqual(el.className, 'red svelte-p153w3');
+		assert.deepEqual(el2.className, 'red svelte-p153w3');
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte

@@ -0,0 +1,8 @@
+<svelte:element this={'custom-element'} class="red"></svelte:element>
+<custom-element class="red"></custom-element>
+
+<style>
+	.red {
+		color: red;
+	}
+</style>