From e82ddd6ea9fb3e7825a80712ed0da5a101500373 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 30 Jun 2026 15:52:51 +0200
Subject: [PATCH] hydrate correctly + test

---
 .../src/internal/client/dom/blocks/portal.js  |  6 ++++-
 .../samples/portal-switch/PageA.svelte        |  9 +++++++
 .../samples/portal-switch/PageB.svelte        |  9 +++++++
 .../samples/portal-switch/_config.js          | 13 ++++++++++
 .../samples/portal-switch/main.svelte         | 24 +++++++++++++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/portal-switch/PageA.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/portal-switch/PageB.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/portal-switch/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/portal-switch/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/blocks/portal.js b/packages/svelte/src/internal/client/dom/blocks/portal.js
index ef588849ea..5516fbe0ef 100644
--- a/packages/svelte/src/internal/client/dom/blocks/portal.js
+++ b/packages/svelte/src/internal/client/dom/blocks/portal.js
@@ -2,7 +2,7 @@
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
 import { block, remove_effect_dom, render_effect } from '../../reactivity/effects.js';
 import { active_effect, set_active_effect } from '../../runtime.js';
-import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { get_next_sibling } from '../operations.js';
 
 /**
@@ -57,6 +57,10 @@ export function portal_outlet(node, id) {
 	var anchor = node;
 	const get_id = typeof id === 'function' ? id : () => id;
 
+	if (hydrating) {
+		anchor = hydrate_next();
+	}
+
 	render_effect(() => {
 		id = get_id();
 
diff --git a/packages/svelte/tests/runtime-runes/samples/portal-switch/PageA.svelte b/packages/svelte/tests/runtime-runes/samples/portal-switch/PageA.svelte
new file mode 100644
index 0000000000..f06c5a7163
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/portal-switch/PageA.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { getPortalKey } from './main.svelte';
+</script>
+
+{#portal getPortalKey()}
+	on page A
+{/portal}
+
+<p>contents of page A</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/portal-switch/PageB.svelte b/packages/svelte/tests/runtime-runes/samples/portal-switch/PageB.svelte
new file mode 100644
index 0000000000..a040b0de9e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/portal-switch/PageB.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { getPortalKey } from './main.svelte';
+</script>
+
+{#portal getPortalKey()}
+	on page B
+{/portal}
+
+<p>contents of page B</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/portal-switch/_config.js b/packages/svelte/tests/runtime-runes/samples/portal-switch/_config.js
new file mode 100644
index 0000000000..feb5d489fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/portal-switch/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<div>on page A</div> <button>switch page</button> <p>contents of page A</p>',
+	test({ assert, target }) {
+		const [toggle] = target.querySelectorAll('button');
+
+		toggle.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<div>on page B</div> <button>switch page</button> <p>contents of page B</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/portal-switch/main.svelte b/packages/svelte/tests/runtime-runes/samples/portal-switch/main.svelte
new file mode 100644
index 0000000000..f70ac26b85
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/portal-switch/main.svelte
@@ -0,0 +1,24 @@
+<script module>
+	import { createContext } from 'svelte';
+
+	const [getPortalKey, setPortalKey] = createContext();
+	export { getPortalKey };
+</script>
+
+<script>
+	import PageA from './PageA.svelte';
+	import PageB from './PageB.svelte';
+
+	const portalKey = Symbol('portal');
+	setPortalKey(portalKey);
+
+	let Page = $state(PageA);
+</script>
+
+<div>
+	{@portal portalKey}
+</div>
+
+<button onclick={() => Page = Page === PageA ? PageB : PageA}>switch page</button>
+
+<Page />