Merge c6a719191a into 020242d6be

.changeset/calm-owls-spread.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: keep the case of camelCase custom element properties set via spread

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

@@ -446,7 +446,7 @@ function set_attributes(
 				set_selected(/** @type {HTMLOptionElement} */ (element), value);
 			} else {
 				var name = key;
-				if (!preserve_attribute_case) {
+				if (!preserve_attribute_case && !(is_custom_element && setters.has(name))) {
 					name = normalize_attribute(name);
 				}
 

packages/svelte/tests/runtime-runes/samples/custom-element-spread-camel-case/_config.js

@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		const element = /** @type {HTMLElement & { __camel_case: { test: true } }} */ (
+			target.querySelector('camel-case-element')
+		);
+
+		assert.equal(element.hasAttribute('camelcase'), false);
+		assert.deepEqual(element.__camel_case, { test: true });
+	}
+});

packages/svelte/tests/runtime-runes/samples/custom-element-spread-camel-case/main.svelte

@@ -0,0 +1,14 @@
+<script module>
+	if (!customElements.get('camel-case-element')) {
+		customElements.define(
+			'camel-case-element',
+			class extends HTMLElement {
+				set camelCase(v) {
+					this.__camel_case = v;
+				}
+			}
+		);
+	}
+</script>
+
+<camel-case-element {...{ camelCase: { test: true } }}></camel-case-element>