-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
REPL.
<!-- App.svelte -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested let:count>
<p>
count in default slot: {count}
</p>
<p slot="foo" let:count>
count in foo slot: {count}
</p>
<p slot="bar">
count in bar slot: {count}
</p>
</Nested>
<!-- Nested.svelte -->
<script>
import { onDestroy } from 'svelte';
let count = 0;
const interval = setInterval(() => {
count += 1;
}, 1000);
onDestroy(() => {
clearInterval(interval);
});
</script>
<div>
<slot {count}></slot>
<slot name="foo" {count}></slot>
<slot name="bar"></slot>
</div>
The count
value looks like it should be visible inside both named slots, since they're 'inside' the default slot that has a let:count
. It's visible inside the foo
slot since that has its own let:count
, but the behaviour inside the bar
slot is odd — the initial value of count
is visible, but it doesn't update. Either it shouldn't be accessible at all (since the component-level let:
technically applies to the default slot, and slots aren't supposed to be children of one another), or it should be accessible and it should update. I think the latter would probably be the least surprising to people, if that's implementable.
A (probably) related bug: if you have two foo
slots, neither updates: https://v3.svelte.technology/repl?version=3.0.0-beta.21&gist=36b8d73bfa3ec92f5463a1f579efeea2