fix: handle `is` attribute on elements with spread (#12056)

The `is` attribute is special and always needs to be part of the static template string, or else it wouldn't be taken into account on initialization
fixes #12052

.changeset/large-waves-join.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: handle `is` attribute on elements with spread

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -278,6 +278,15 @@ function serialize_element_spread_attributes(
 			// TODO: handle contains_call_expression
 			const [, value] = serialize_attribute_value(attribute.value, context);
 
+			if (
+				name === 'is' &&
+				value.type === 'Literal' &&
+				context.state.metadata.namespace === 'html'
+			) {
+				context.state.template.push(` is="${escape_html(value.value, true)}"`);
+				continue;
+			}
+
 			if (
 				is_event_attribute(attribute) &&
 				(attribute.value[0].expression.type === 'ArrowFunctionExpression' ||

packages/svelte/tests/runtime-runes/samples/element-is-attribute/_config.js

@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target, logs }) {
+		const [b1, b2] = target.querySelectorAll('button');
+
+		b1.click();
+		flushSync();
+		assert.deepEqual(logs, ['works']);
+
+		b2.click();
+		flushSync();
+		assert.deepEqual(logs, ['works', 'works']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/element-is-attribute/main.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">
+	if (!customElements.get('x-button')) {
+		class XButton extends HTMLButtonElement {
+			connectedCallback() {
+				this.addEventListener('click', () => console.log('works'));
+			}
+		}
+
+		customElements.define('x-button', XButton, { extends: 'button' });
+	}
+</script>
+
+<script lang="ts">
+	let { ...props } = $props();
+</script>
+
+<button is="x-button">click me</button>
+<button {...props} is="x-button">click me</button>