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, 'test');
assert.equal(value2.shadowRoot?.innerHTML, 'test');
+
+ const value_builtin = target.querySelector('div');
+ assert.equal(value_builtin?.shadowRoot?.innerHTML, 'test');
}
});
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 = `${v}`;
+ }
+ }
+ }, {
+ extends: 'div'
+ });
+ }