fix: support camelCase properties on custom elements (#9328)

while attributes are case insensitive, properties are not. to not introduce a breaking change, the lowercased variant is checked first.
fixes #9325

.changeset/seven-cars-drum.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: support camelCase properties on custom elements

packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js

@@ -103,8 +103,8 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 				this.parent.has_dynamic_value = true;
 			}
 		}
-		if (this.parent.node.namespace == namespaces.foreign) {
-			// leave attribute case alone for elements in the "foreign" namespace
+		if (this.parent.node.namespace == namespaces.foreign || this.parent.node.name.includes('-')) {
+			// leave attribute case alone for elements in the "foreign" namespace and for custom elements
 			this.name = this.node.name;
 			this.metadata = this.get_metadata();
 			this.is_indirectly_bound_value = false;

packages/svelte/src/runtime/internal/dom.js

@@ -480,7 +480,10 @@ export function set_custom_element_data_map(node, data_map) {
 /**
  * @returns {void} */
 export function set_custom_element_data(node, prop, value) {
-	if (prop in node) {
+	const lower = prop.toLowerCase(); // for backwards compatibility with existing behavior we do lowercase first
+	if (lower in node) {
+		node[lower] = typeof node[lower] === 'boolean' && value === '' ? true : value;
+	} else if (prop in node) {
 		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
 	} else {
 		attr(node, prop, value);

packages/svelte/test/runtime/samples/attribute-casing-custom-element/_config.js

@@ -0,0 +1,7 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	html: `
+		<my-custom-element>Hello World!</my-custom-element>
+	`
+};

packages/svelte/test/runtime/samples/attribute-casing-custom-element/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	class MyCustomElement extends HTMLElement {
+		constructor() {
+			super();
+			this._obj = null;
+		}
+
+		set camelCase(obj) {
+			this._obj = obj;
+			this.render();
+		}
+
+		connectedCallback() {
+			this.render();
+		}
+
+		render() {
+			this.innerHTML = 'Hello ' + this._obj.text + '!';
+		}
+	}
+
+	window.customElements.define('my-custom-element', MyCustomElement);
+</script>
+
+<my-custom-element camelCase={{ text: 'World' }} />

packages/svelte/test/runtime/samples/attribute-custom-element-inheritance/_config.js

@@ -0,0 +1,7 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	html: `
+		<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
+	`
+};

packages/svelte/test/runtime/samples/attribute-custom-element-inheritance/main.svelte

@@ -0,0 +1,33 @@
+<script>
+	class MyCustomElement extends HTMLElement {
+		constructor() {
+			super();
+			this._obj = null;
+			this._text = null;
+		}
+
+		set text(text) {
+			this._text = text;
+			this.render();
+		}
+
+		set camelCase(obj) {
+			this._obj = obj;
+			this.render();
+		}
+
+		connectedCallback() {
+			this.render();
+		}
+
+		render() {
+			this.innerHTML = 'Hello ' + this._obj.text + this._text;
+		}
+	}
+
+	class Extended extends MyCustomElement {}
+
+	window.customElements.define('my-custom-inheritance-element', Extended);
+</script>
+
+<my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />