diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js index 672354669b..ff994df0c9 100644 --- a/packages/svelte/src/internal/client/dom/elements/attributes.js +++ b/packages/svelte/src/internal/client/dom/elements/attributes.js @@ -136,7 +136,12 @@ export function set_xlink_attribute(dom, attribute, value) { */ export function set_custom_element_data(node, prop, value) { if (prop in node) { - var curr_val = node[prop]; + try { + var curr_val = node[prop]; + } catch { + set_attribute(node, prop, value); + return; + } var next_val = typeof curr_val === 'boolean' && value === '' ? true : value; if (typeof curr_val !== 'object' || curr_val !== next_val) { node[prop] = next_val; diff --git a/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/custom-element-with-settable-only-property.js b/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/custom-element-with-settable-only-property.js new file mode 100644 index 0000000000..a71864fabc --- /dev/null +++ b/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/custom-element-with-settable-only-property.js @@ -0,0 +1,10 @@ +// Note that custom element names must be unique across tests that can be run at the same time. So we use a verbose element name instead of just `` +customElements.define("custom-element-with-settable-only-property", class CustomElement extends HTMLElement { + set prop(n) { + this.value = n; + } + + get prop() { + throw new Error("This value is not gettable"); + } +}); diff --git a/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/main.svelte b/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/main.svelte new file mode 100644 index 0000000000..2962a69b5c --- /dev/null +++ b/packages/svelte/tests/hydration/samples/custom-element-with-settable-only-property/main.svelte @@ -0,0 +1,5 @@ + + +