fix: properly set value property of custom elements (#15206)

Avoid going through the `element.value = element.__value = newValue` condition because `__value` is actually how Lit stores the current value on the element, and messing with that would break things: Lit would think the value hasn't changed (because `__value` is already set to the new value by us) and doesn't fire an update.

fixes #15194

Author: dummdidumm

.changeset/great-planes-swim.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly set `value` property of custom elements

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -363,9 +363,10 @@ export function set_attributes(
 			element.style.cssText = value + '';
 		} else if (key === 'autofocus') {
 			autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
-		} else if (key === '__value' || (key === 'value' && value != null)) {
-			// @ts-ignore
-			element.value = element[key] = element.__value = value;
+		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
+			// @ts-ignore We're not running this for custom elements because __value is actually
+			// how Lit stores the current value on the element, and messing with that would break things.
+			element.value = element.__value = value;
 		} else if (key === 'selected' && is_option_element) {
 			set_selected(/** @type {HTMLOptionElement} */ (element), value);
 		} else {

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js

@@ -1,19 +1,24 @@
 import { test } from '../../test';
 
 export default test({
-	mode: ['client', 'server'],
+	mode: ['client'],
 	async test({ assert, target }) {
 		const my_element = /** @type HTMLElement & { object: { test: true }; } */ (
 			target.querySelector('my-element')
 		);
-		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
-			target.querySelector('a')
-		);
 		assert.equal(my_element.getAttribute('string'), 'test');
 		assert.equal(my_element.hasAttribute('object'), false);
 		assert.deepEqual(my_element.object, { test: true });
+
+		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
+			target.querySelector('a')
+		);
 		assert.equal(my_link.getAttribute('string'), 'test');
 		assert.equal(my_link.hasAttribute('object'), false);
 		assert.deepEqual(my_link.object, { test: true });
+
+		const [value1, value2] = target.querySelectorAll('value-element');
+		assert.equal(value1.shadowRoot?.innerHTML, '<span>test</span>');
+		assert.equal(value2.shadowRoot?.innerHTML, '<span>test</span>');
 	}
 });

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte

@@ -1,2 +1,22 @@
+<script module>
+    customElements.define('value-element', class extends HTMLElement {
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+
+        set value(v) {
+            if (this.__value !== v) {
+                this.__value = v;
+                this.shadowRoot.innerHTML = `<span>${v}</span>`;
+            }
+        }
+    });
+</script>
+
 <my-element string="test" object={{ test: true }}></my-element>
 <a is="my-link" string="test" object={{ test: true }}></a>
+
+<value-element value="test"></value-element>
+<value-element {...{value: "test"}}></value-element>