diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 73c59e91f14c..66fe23513143 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
# svelte
+## 4.2.8
+
+### Patch Changes
+
+- fix: port over props that were set prior to initialization ([#9701](https://github.com/sveltejs/svelte/pull/9701))
+
## 4.2.7
### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index f846beb22cc0..a9ac27686593 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte",
- "version": "4.2.7",
+ "version": "4.2.8",
"description": "Cybernetically enhanced web apps",
"type": "module",
"module": "src/runtime/index.js",
diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js
index 88f048c6ee7c..3b9848772fef 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/src/shared/version.js b/packages/svelte/src/shared/version.js
index eb8517719a6c..99a2669653d4 100644
--- a/packages/svelte/src/shared/version.js
+++ b/packages/svelte/src/shared/version.js
@@ -6,5 +6,5 @@
* https://svelte.dev/docs/svelte-compiler#svelte-version
* @type {string}
*/
-export const VERSION = '4.2.7';
+export const VERSION = '4.2.8';
export const PUBLIC_VERSION = '4';
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 000000000000..f8c6ea99842f
--- /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 000000000000..b170b6b164c8
--- /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 = '';
+ 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');
+}
diff --git a/sites/svelte.dev/src/routes/+layout.svelte b/sites/svelte.dev/src/routes/+layout.svelte
index e8b8ca562c74..806532fb9c22 100644
--- a/sites/svelte.dev/src/routes/+layout.svelte
+++ b/sites/svelte.dev/src/routes/+layout.svelte
@@ -35,7 +35,6 @@
-
-
@@ -92,12 +87,4 @@
height: 100%;
width: 100%;
}
-
- .banner-bottom {
- text-align: center;
- background: var(--sk-theme-1-variant);
- color: white;
- text-decoration: underline;
- padding: 8px;
- }
diff --git a/sites/svelte.dev/src/routes/auth/login/+server.js b/sites/svelte.dev/src/routes/auth/login/+server.js
index b549ff4202b1..25d8ea5bd131 100644
--- a/sites/svelte.dev/src/routes/auth/login/+server.js
+++ b/sites/svelte.dev/src/routes/auth/login/+server.js
@@ -21,7 +21,7 @@ export const GET = client_id
In order to use GitHub authentication, you will need to register an OAuth application and create a local .env file:
GITHUB_CLIENT_ID=[YOUR_APP_ID]\nGITHUB_CLIENT_SECRET=[YOUR_APP_SECRET]\nBASEURL=http://localhost:5173
The BASEURL variable should match the callback URL specified for your app.
- See also here
+ See also here
`,
{
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
index ddcdadf14450..efae45dde75e 100644
--- a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
@@ -25,7 +25,7 @@