diff --git a/.changeset/wicked-chefs-bow.md b/.changeset/wicked-chefs-bow.md
new file mode 100644
index 0000000000..b138fd409d
--- /dev/null
+++ b/.changeset/wicked-chefs-bow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: port over props that were set prior to initialization
diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js
index 88f048c6ee..3b9848772f 100644
--- a/packages/svelte/src/runtime/internal/Component.js
+++ b/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: {
diff --git a/packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/main.svelte b/packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/main.svelte
new file mode 100644
index 0000000000..f8c6ea9984
--- /dev/null
+++ b/packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/main.svelte
@@ -0,0 +1,9 @@
+
{prop}
diff --git a/packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/test.js b/packages/svelte/test/runtime-browser/custom-elements-samples/set-property-before-mounted/test.js new file mode 100644 index 0000000000..b170b6b164 --- /dev/null +++ b/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 = '