fix: port over props that were set prior to initialization

.changeset/hungry-tips-unite.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: port over props that were set prior to initialization

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

@@ -127,6 +127,16 @@ if (typeof HTMLElement === 'function') {
 						this.$$d[name] = get_custom_element_value(name, attribute.value, this.$$p_d, 'toProp');
 					}
 				}
+				// Port over props that were set programmatically before ce was initialized
+				for (const key in this.$$p_d) {
+					// @ts-expect-error
+					if (!(key in this.$$d) && this[key] !== undefined) {
+						// @ts-expect-error
+						this.$$d[key] = this[key]; // don't transform, these were set through JavaScript
+						// @ts-expect-error
+						delete this[key]; // remove the property that shadows the getter/setter
+					}
+				}
 				this.$$c = createClassComponent({
 					component: this.$$ctor,
 					target: this.shadowRoot || this,

packages/svelte/tests/runtime-browser/custom-elements-samples/set-property-before-mounted/_config.js

@@ -0,0 +1,25 @@
+import { test } from '../../assert';
+
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target, componentCtor }) {
+		target.innerHTML = '<custom-element red white></custom-element>';
+		const ce = target.querySelector('custom-element');
+		ce.prop = 1;
+		customElements.define('custom-element', componentCtor.element);
+		await tick();
+		await tick();
+
+		const ce_root = target.querySelector('custom-element').shadowRoot;
+		const p = ce_root.querySelector('p');
+
+		assert.equal(p.textContent, '1');
+
+		ce.prop = 2;
+		await tick();
+		await tick();
+
+		assert.equal(p.textContent, '2');
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/set-property-before-mounted/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let prop;
+</script>
+
+<p>{prop}</p>