fix: port over props that were set prior to initialization (#9701)

...and then delete the property descriptor that shadows the prototype descriptor
fixes #9487

.changeset/wicked-chefs-bow.md

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

packages/svelte/src/runtime/internal/Component.js

@@ -270,6 +270,13 @@ 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) {
+					if (!(key in this.$$d) && this[key] !== undefined) {
+						this.$$d[key] = this[key]; // don't transform, these were set through JavaScript
+						delete this[key]; // remove the property that shadows the getter/setter
+					}
+				}
 				this.$$c = new this.$$ctor({
 					target: this.shadowRoot || this,
 					props: {

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

@@ -0,0 +1,9 @@
+<svelte:options
+	customElement={null}
+/>
+
+<script>
+	export let prop;
+</script>
+
+<p>{prop}</p>

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

@@ -0,0 +1,23 @@
+import * as assert from 'assert.js';
+import { tick } from 'svelte';
+import Main from './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<custom-element red white></custom-element>';
+	const ce = target.querySelector('custom-element');
+	ce.prop = 1;
+	customElements.define('custom-element', Main.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');
+}