diff --git a/.changeset/short-mails-know.md b/.changeset/short-mails-know.md
new file mode 100644
index 0000000000..0b8b62d575
--- /dev/null
+++ b/.changeset/short-mails-know.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid shadowing a variable in dynamic components
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
index d58a24b455..9b3eeecb51 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -10,9 +10,10 @@ import { build_component } from './shared/component.js';
export function Component(node, context) {
const component = build_component(
node,
- // if it's not dynamic we will just use the node name, if it is dynamic we will use the node name
- // only if it's a valid identifier, otherwise we will use a default name
- !node.metadata.dynamic || regex_is_valid_identifier.test(node.name) ? node.name : '$$component',
+ // avoid shadowing the component variable by a variable used in $.component
+ node.metadata.dynamic
+ ? '$$component_' + node.name.replaceAll(/[^a-zA-Z_$0-9]/g, '_')
+ : node.name,
context
);
context.state.init.push(component);
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
new file mode 100644
index 0000000000..d37c929273
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
@@ -0,0 +1,5 @@
+
+
+{@render children()}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
new file mode 100644
index 0000000000..cd1fa2b1b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+ async test({ assert, target }) {
+ assert.htmlEqual(target.innerHTML, 'test');
+ }
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
new file mode 100644
index 0000000000..d0646b319b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
@@ -0,0 +1,9 @@
+
+
+
+ test
+