Skip to content

Slot scoping bugs #2320

@Rich-Harris

Description

@Rich-Harris

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions