From aa0b914f5ed7147ecc44cf1536c34bea4feb5e45 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Sun, 10 Aug 2025 00:08:48 +0200 Subject: [PATCH 1/8] Add check for builtin custom elements in `set_custom_element_data` --- packages/svelte/src/internal/client/dom/elements/attributes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 2fa5d4541c48..8541da72f149 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -241,7 +241,7 @@ export function set_custom_element_data(node, prop, value) { (setters_cache.has(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') ) { From 240b84ecf4cdbb1d7095bf7505706b4632e2d46b Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Sun, 10 Aug 2025 00:14:39 +0200 Subject: [PATCH 2/8] Create fuzzy-shrimps-dream.md --- .changeset/fuzzy-shrimps-dream.md | 5 +++++ 1 file changed, 5 insertions(+) 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 000000000000..0ddab531acb5 --- /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` From 9ef2f1798d0145e15c89a5ef6daf81d7f71e6725 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 18 Aug 2025 22:00:41 +0200 Subject: [PATCH 3/8] Add test template for testing set_custom_element_data on builtin custom elements --- .../custom-element-attributes/main.svelte | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) 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 82774f160d3b..9770848f6efb 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" + }); + } @@ -22,3 +40,4 @@ +
From 287de512759e14db88c13bd7c77477753225a508 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 18 Aug 2025 22:04:24 +0200 Subject: [PATCH 4/8] Add test case for set_custom_element_data on builtin custom elements --- .../runtime-runes/samples/custom-element-attributes/_config.js | 3 +++ 1 file changed, 3 insertions(+) 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 7f406d8f0d28..6da244ecc9f2 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.querySelectorAll('div'); + assert.equal(value_builtin.shadowRoot?.innerHTML, 'test'); } }); From 465598b5fbba06d89caa4a2f212101a0b34451b5 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 18 Aug 2025 22:06:04 +0200 Subject: [PATCH 5/8] Fix quotes in test template --- .../runtime-runes/samples/custom-element-attributes/main.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9770848f6efb..badb8f96c756 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 @@ -30,7 +30,7 @@ } } }, { - extends: "div" + extends: 'div' }); } From 087e6f3fdce992d3adeaadce0add31ea50a21ee1 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 18 Aug 2025 22:12:51 +0200 Subject: [PATCH 6/8] Fix test case --- .../runtime-runes/samples/custom-element-attributes/_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6da244ecc9f2..984a790ed4f0 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 @@ -21,7 +21,7 @@ export default test({ assert.equal(value1.shadowRoot?.innerHTML, 'test'); assert.equal(value2.shadowRoot?.innerHTML, 'test'); - const value_builtin = target.querySelectorAll('div'); + const value_builtin = target.querySelector('div'); assert.equal(value_builtin.shadowRoot?.innerHTML, 'test'); } }); From c6f6205398e47cdf688d752df1fa04326d20ac30 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 18 Aug 2025 22:15:02 +0200 Subject: [PATCH 7/8] Fix test case typecheck --- .../runtime-runes/samples/custom-element-attributes/_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 984a790ed4f0..3d8917c1479e 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 @@ -22,6 +22,6 @@ export default test({ assert.equal(value2.shadowRoot?.innerHTML, 'test'); const value_builtin = target.querySelector('div'); - assert.equal(value_builtin.shadowRoot?.innerHTML, 'test'); + assert.equal(value_builtin?.shadowRoot?.innerHTML, 'test'); } }); From 2117a15ef57c52f16047d2f9b929032ef9d56560 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Sun, 24 Aug 2025 08:46:08 +0200 Subject: [PATCH 8/8] Use specific setter cache for builtin custom elements --- .../svelte/src/internal/client/dom/elements/attributes.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 8541da72f149..a5b7140f2538 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -238,7 +238,7 @@ 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.getAttribute('is') || node.tagName.toLowerCase()) @@ -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