diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/Child.svelte
new file mode 100644
index 0000000000..189c1a8a8c
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/Child.svelte
@@ -0,0 +1,9 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/_config.js
new file mode 100644
index 0000000000..460b77d563
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	html: '<custom></custom>',
+	async test({ assert, component, target }) {
+		const [div] = target.children[0].elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+		assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');
+
+		component.hide();
+		flushSync();
+
+		assert.isFalse(target.children[0].elements_children.includes(div));
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/main.svelte
new file mode 100644
index 0000000000..acb448db9d
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component-removal/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+</script>
+
+<custom>
+	{#if visible}
+		<Child message="hello from child"></Child>
+	{/if}
+</custom>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
index 21ff9d835e..6c3c0d60bd 100644
--- a/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
+++ b/packages/svelte/tests/custom-renderers/samples-dom/dom-child-component/_config.js
@@ -2,11 +2,11 @@ import { test } from '../../test-dom.test';
 
 export default test({
 	// this is the custom rendered component...it doesn't have anything inside because the part of the renderer
-	// responsible for the interleaving is the `before` function on the comment node which only push into `dom_elements` in this case
+	// responsible for the interleaving is the `before` function on the comment node which only push into `target.elements_children` in this case
 	html: '<custom></custom>',
-	test({ assert, dom_elements }) {
-		// we then get the element out of dom_elements
-		const [div] = dom_elements;
+	test({ assert, target }) {
+		// we then get the element out of target.elements_children
+		const [div] = target.children[0].elements_children;
 		// check that is an actual DOM element and that it has the expected content
 		assert.instanceOf(div, HTMLDivElement);
 		assert.equal(div.outerHTML, '<div><span>hello from child</span></div>');
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/Child.svelte
new file mode 100644
index 0000000000..b7b75c2ddc
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/Child.svelte
@@ -0,0 +1 @@
+<text>something</text>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/_config.js
new file mode 100644
index 0000000000..d4663e3a34
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	hydrate: true,
+	test({ assert, component, target, warnings }) {
+		assert.instanceOf(target, HTMLElement);
+		assert.deepEqual(warnings, []);
+		assert.ok(target.querySelector('#keep-me'));
+		assert.ok(target.querySelector('custom-rendered'));
+
+		component.hide();
+		flushSync();
+
+		assert.ok(target.querySelector('#keep-me'));
+		assert.equal(target.querySelector('custom-rendered'), null);
+		assert.notInclude(target.textContent, 'Cool:');
+
+		component.show();
+		flushSync();
+
+		assert.ok(target.querySelector('#keep-me'));
+		assert.ok(target.querySelector('custom-rendered'));
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/main.svelte
new file mode 100644
index 0000000000..623d7dabe5
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/hydration-interleaved-dom-custom/main.svelte
@@ -0,0 +1,23 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		Cool: <Child />
+	{/if}
+</div>
+
+<div id="keep-me"></div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/Child.svelte
new file mode 100644
index 0000000000..c8167faeaa
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/_config.js
new file mode 100644
index 0000000000..f94d531b16
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/_config.js
@@ -0,0 +1,44 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	test({ assert, component, target }) {
+		// we mounted the component in the root fragment so the div is in the target.elements_children
+		const [div] = target.elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+
+		// find the custom-rendered element in the div and assert the json content
+		let custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+		assert.deepEqual(JSON.parse(custom_rendered.textContent), {
+			type: 'element',
+			name: 'div',
+			attributes: {},
+			children: [
+				{
+					type: 'element',
+					name: 'span',
+					attributes: {},
+					children: [{ type: 'text', value: 'hello from child' }],
+					elements_children: [],
+					listeners: {}
+				}
+			],
+			elements_children: [],
+			listeners: {}
+		});
+
+		component.hide();
+		flushSync();
+
+		// we unmounted the custom rendered component so the map is empty again
+		assert.equal(div.querySelector('custom-rendered'), null);
+
+		component.show();
+		flushSync();
+
+		// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
+		custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/main.svelte
new file mode 100644
index 0000000000..ab5cc65d79
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child-extra-text/main.svelte
@@ -0,0 +1,20 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		test: <Child message="hello from child"></Child>
+	{/if}
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/Child.svelte b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/Child.svelte
new file mode 100644
index 0000000000..c8167faeaa
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { message } = $props();
+</script>
+
+<div>
+	<span>{message}</span>
+</div>
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/_config.js b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/_config.js
new file mode 100644
index 0000000000..f94d531b16
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/_config.js
@@ -0,0 +1,44 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test-dom.test';
+
+export default test({
+	test({ assert, component, target }) {
+		// we mounted the component in the root fragment so the div is in the target.elements_children
+		const [div] = target.elements_children;
+		assert.instanceOf(div, HTMLDivElement);
+
+		// find the custom-rendered element in the div and assert the json content
+		let custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+		assert.deepEqual(JSON.parse(custom_rendered.textContent), {
+			type: 'element',
+			name: 'div',
+			attributes: {},
+			children: [
+				{
+					type: 'element',
+					name: 'span',
+					attributes: {},
+					children: [{ type: 'text', value: 'hello from child' }],
+					elements_children: [],
+					listeners: {}
+				}
+			],
+			elements_children: [],
+			listeners: {}
+		});
+
+		component.hide();
+		flushSync();
+
+		// we unmounted the custom rendered component so the map is empty again
+		assert.equal(div.querySelector('custom-rendered'), null);
+
+		component.show();
+		flushSync();
+
+		// we mounted the custom rendered component into the div again so it's in the mounted_in_dom_elements map again
+		custom_rendered = div.querySelector('custom-rendered');
+		assert.instanceOf(custom_rendered, HTMLElement);
+	}
+});
diff --git a/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/main.svelte b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/main.svelte
new file mode 100644
index 0000000000..ad36347f79
--- /dev/null
+++ b/packages/svelte/tests/custom-renderers/samples-dom/renderer-to-dom-child/main.svelte
@@ -0,0 +1,20 @@
+<svelte:options customRenderer={null} />
+
+<script>
+	import Child from './Child.svelte';
+
+	let visible = $state(true);
+
+	export function hide() {
+		visible = false;
+	}
+	export function show() {
+		visible = true;
+	}
+</script>
+
+<div>
+	{#if visible}
+		<Child message="hello from child"></Child>
+	{/if}
+</div>