diff --git a/.changeset/tidy-trees-stay.md b/.changeset/tidy-trees-stay.md
new file mode 100644
index 0000000000..65bf7de619
--- /dev/null
+++ b/.changeset/tidy-trees-stay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve dynamic element connections during hydration
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 84217c57e3..adca73b181 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -71,6 +71,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 		branches.ensure(next_tag, (anchor) => {
 			if (next_tag) {
+				var is_hydrating = hydrating;
 				element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns);
 
 				if (DEV && location) {
@@ -123,7 +124,8 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
 				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
 
-				anchor.before(element);
+				// we only move the node if we are not hydrating since a claimed element is already in place
+				if (!is_hydrating) anchor.before(element);
 			}
 
 			if (hydrating) {
diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js
new file mode 100644
index 0000000000..cdd8f4484b
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: { condition: false },
+	props: { condition: true },
+
+	snapshot(target) {
+		return { element: target.querySelector('div'), sibling: target.querySelector(':scope > p') };
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html
new file mode 100644
index 0000000000..5f68a45e48
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/_expected.html
@@ -0,0 +1,2 @@
+<div><p>client</p></div>
+<p>after</p>
diff --git a/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte
new file mode 100644
index 0000000000..839a06981f
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/dynamic-element-child-mismatch/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let condition;
+	export let tag = 'div';
+</script>
+
+<svelte:element this={tag}>
+	{#if condition}<p>client</p>{:else}<span>server</span>{/if}
+</svelte:element>
+<p>after</p>
diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js
index 249c5ad33d..9fdb917048 100644
--- a/packages/svelte/tests/runtime-browser/assert.js
+++ b/packages/svelte/tests/runtime-browser/assert.js
@@ -128,6 +128,7 @@ function normalize_children(node) {
  *	id_prefix?: string;
  *	props?: Props;
  *	compileOptions?: Partial<CompileOptions>;
+ *	before_test?: () => void;
  *	test?: (args: {
  *		assert: typeof assert & {
  *			htmlEqual(a: string, b: string, description?: string): void;
diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js
new file mode 100644
index 0000000000..beabb5b1fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/_config.js
@@ -0,0 +1,71 @@
+import { flushSync } from 'svelte';
+import { assert_ok, test } from '../../assert';
+
+/** @type {Record<string, number>} */
+const connections = {};
+/** @type {string[]} */
+const disconnections = [];
+/** @type {Element[]} */
+let claimed;
+/** @type {MutationObserver} */
+let observer;
+
+export default test({
+	before_test() {
+		const target = document.querySelector('main');
+		assert_ok(target);
+		claimed = Array.from(target.children);
+		customElements.define(
+			'connection-probe',
+			class extends HTMLElement {
+				connectedCallback() {
+					connections[this.id] = (connections[this.id] || 0) + 1;
+				}
+				disconnectedCallback() {
+					disconnections.push(this.id);
+				}
+			}
+		);
+		observer = new MutationObserver(() => {});
+		observer.observe(target, { childList: true });
+	},
+
+	test({ assert, component, target }) {
+		const removed = observer.takeRecords().flatMap((record) => Array.from(record.removedNodes));
+		observer.disconnect();
+		assert.deepEqual(
+			removed
+				.filter((node) => node instanceof Element)
+				.filter((node) => claimed.includes(node))
+				.map((node) => node.id),
+			[]
+		);
+		assert.deepEqual(connections, { child: 1, custom: 1 });
+		assert.deepEqual(disconnections, []);
+
+		flushSync(() => {
+			component.tag = 'section';
+			component.empty_tag = 'span';
+			component.void_tag = 'hr';
+			component.custom_tag = 'aside';
+		});
+		assert.equal(target.querySelector('#parent')?.tagName, 'SECTION');
+		assert.equal(target.querySelector('#empty')?.tagName, 'SPAN');
+		assert.equal(target.querySelector('#void')?.tagName, 'HR');
+		assert.equal(target.querySelector('#custom')?.tagName, 'ASIDE');
+		assert.deepEqual(connections, { child: 2, custom: 1 });
+		assert.deepEqual(disconnections, ['child', 'custom']);
+
+		flushSync(() => {
+			component.tag = null;
+		});
+		assert.equal(target.querySelector('#parent'), null);
+		assert.deepEqual(disconnections, ['child', 'custom', 'child']);
+
+		flushSync(() => {
+			component.tag = 'div';
+		});
+		assert.equal(target.querySelector('#parent')?.tagName, 'DIV');
+		assert.deepEqual(connections, { child: 3, custom: 1 });
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte
new file mode 100644
index 0000000000..44e902188c
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/dynamic-element-hydration-preserves-connection/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let tag = 'div';
+	export let empty_tag = 'div';
+	export let void_tag = 'input';
+	export let custom_tag = 'connection-probe';
+</script>
+
+<svelte:element this={tag} id="parent"><connection-probe id="child"></connection-probe></svelte:element>
+<svelte:element this={empty_tag} id="empty" />
+<svelte:element this={void_tag} id="void" />
+<svelte:element this={custom_tag} id="custom" />