From 6534aa08e32b3c2d09c2ffb06e4ae7a18fdffa30 Mon Sep 17 00:00:00 2001
From: Edoardo Cavazza <edoardo.cavazza@chialab.it>
Date: Mon, 25 Aug 2025 21:06:53 +0200
Subject: [PATCH] fix: Add check for builtin custom elements in
 `set_custom_element_data` (#16592)

Fixes #16591

This PR introduces a check for builtin custom elements (is attribute) inside the set_custom_element_data helper in order to correctly set properties that have a setter.
---
 .changeset/fuzzy-shrimps-dream.md             |  5 +++++
 .../client/dom/elements/attributes.js         |  9 +++++----
 .../custom-element-attributes/_config.js      |  3 +++
 .../custom-element-attributes/main.svelte     | 19 +++++++++++++++++++
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fuzzy-shrimps-dream.md

diff --git a/.changeset/fuzzy-shrimps-dream.md b/.changeset/fuzzy-shrimps-dream.md
new file mode 100644
index 0000000000..0ddab531ac
--- /dev/null
+++ b/.changeset/fuzzy-shrimps-dream.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: Add check for builtin custom elements in `set_custom_element_data`
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 2fa5d4541c..a5b7140f25 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -238,10 +238,10 @@ export function set_custom_element_data(node, prop, value) {
 			// Don't compute setters for custom elements while they aren't registered yet,
 			// because during their upgrade/instantiation they might add more setters.
 			// Instead, fall back to a simple "an object, then set as property" heuristic.
-			(setters_cache.has(node.nodeName) ||
+			(setters_cache.has(node.getAttribute('is') || node.nodeName) ||
 			// customElements may not be available in browser extension contexts
 			!customElements ||
-			customElements.get(node.tagName.toLowerCase())
+			customElements.get(node.getAttribute('is') || node.tagName.toLowerCase())
 				? get_setters(node).includes(prop)
 				: value && typeof value === 'object')
 		) {
@@ -546,9 +546,10 @@ var setters_cache = new Map();
 
 /** @param {Element} element */
 function get_setters(element) {
-	var setters = setters_cache.get(element.nodeName);
+	var cache_key = element.getAttribute('is') || element.nodeName;
+	var setters = setters_cache.get(cache_key);
 	if (setters) return setters;
-	setters_cache.set(element.nodeName, (setters = []));
+	setters_cache.set(cache_key, (setters = []));
 
 	var descriptors;
 	var proto = element; // In the case of custom elements there might be setters on the instance
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js
index 7f406d8f0d..3d8917c147 100644
--- a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js
@@ -20,5 +20,8 @@ export default test({
 		const [value1, value2] = target.querySelectorAll('value-element');
 		assert.equal(value1.shadowRoot?.innerHTML, '<span>test</span>');
 		assert.equal(value2.shadowRoot?.innerHTML, '<span>test</span>');
+
+		const value_builtin = target.querySelector('div');
+		assert.equal(value_builtin?.shadowRoot?.innerHTML, '<span>test</span>');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
index 82774f160d..badb8f96c7 100644
--- a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
@@ -15,6 +15,24 @@
 			}
 		});
 	}
+	if(!customElements.get('value-builtin')) {
+		customElements.define('value-builtin', class extends HTMLDivElement {
+
+			constructor() {
+				super();
+				this.attachShadow({ mode: 'open' });
+			}
+
+			set value(v) {
+				if (this.__value !== v) {
+					this.__value = v;
+					this.shadowRoot.innerHTML = `<span>${v}</span>`;
+				}
+			}
+		}, {
+			extends: 'div'
+		});
+	}
 </script>
 
 <my-element string="test" object={{ test: true }}></my-element>
@@ -22,3 +40,4 @@
 
 <value-element value="test"></value-element>
 <value-element {...{value: "test"}}></value-element>
+<div is="value-builtin" value="test"></div>