fix: propagate custom element component prop changes (#12774)

* fix: propagate custom element component prop changes

* add test

Author: trueadm

.changeset/poor-mugs-pay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: propagate custom element component prop changes

packages/svelte/src/internal/client/dom/elements/custom-element.js

@@ -1,7 +1,7 @@
 import { createClassComponent } from '../../../../legacy/legacy-client.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
 import { append } from '../template.js';
-import { define_property, object_keys } from '../../../shared/utils.js';
+import { define_property, get_descriptor, object_keys } from '../../../shared/utils.js';
 
 /**
  * @typedef {Object} CustomElementPropDefinition
@@ -305,7 +305,18 @@ export function create_custom_element(
 			set(value) {
 				value = get_custom_element_value(prop, value, props_definition);
 				this.$$d[prop] = value;
-				this.$$c?.$set({ [prop]: value });
+				var component = this.$$c;
+
+				if (component) {
+					// // If the instance has an accessor, use that instead
+					var setter = get_descriptor(component, prop)?.get;
+
+					if (setter) {
+						component[prop] = value;
+					} else {
+						component.$set({ [prop]: value });
+					}
+				}
 			}
 		});
 	});

packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/_config.js

@@ -0,0 +1,37 @@
+import { flushSync } from 'svelte';
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+		await tick();
+
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+		const button = el.shadowRoot.querySelector('button');
+
+		assert.equal(button.textContent, '0');
+		assert.equal(el.count, 0);
+
+		button.click();
+
+		flushSync();
+
+		assert.equal(button.textContent, '1');
+		assert.equal(el.count, 1);
+
+		el.count = 0;
+
+		assert.equal(button.textContent, '0');
+		assert.equal(el.count, 0);
+
+		button.click();
+
+		flushSync();
+
+		assert.equal(button.textContent, '1');
+		assert.equal(el.count, 1);
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options customElement="custom-element" />
+
+<script>
+	export let count = 0;
+</script>
+
+<button onclick={() => count++}>{count}</button>