fix: adjust scope parent for named slots (#10843)

fixes #10802
pull/10846/head
Simon H 9 months ago committed by GitHub
parent 117082b039
commit 682f4a6513
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
fix: adjust scope parent for named slots

@ -400,9 +400,9 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot' (attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
) )
) { ) {
// <div slot="..."> inherits the scope above the component, because slots are hella weird // <div slot="..."> inherits the scope above the component unless the component is a named slot itself, because slots are hella weird
scopes.set(child, state.scope); scopes.set(child, is_default_slot ? state.scope : scope);
visit(child); visit(child, { scope: is_default_slot ? state.scope : scope });
} else { } else {
if (child.type === 'ExpressionTag') { if (child.type === 'ExpressionTag') {
// expression tag is a special case — we don't visit it directly, but via process_children, // expression tag is a special case — we don't visit it directly, but via process_children,

@ -0,0 +1,9 @@
<script>
export let text;
</script>
<div>
{text}
<hr />
<slot name="footer" />
</div>

@ -0,0 +1,7 @@
import { test } from '../../test';
export default test({
html: `
<div>hello world <hr> <div slot="footer">hello world</div></div>
`
});

@ -0,0 +1,12 @@
<script>
import Nested from "./Nested.svelte"
import Nested2 from "./Nested2.svelte"
</script>
<Nested>
<Nested2 slot="inner" let:text {text}>
<div slot="footer">
{text}
</div>
</Nested2>
</Nested>
Loading…
Cancel
Save