Skip to content

Conversation

tanhauhau
Copy link
Member

@tanhauhau tanhauhau commented Mar 4, 2021

BREAKING CHANGE

Default slot let bindings are not available on named slots anymore and vice versa:

<script>
	import Nested from './Nested.svelte';
</script>

<Nested let:count>
	<p>
		count in default slot - is available: {count}
	</p>
	<p slot="bar">
		count in bar slot - is not available: {count}
	</p>
</Nested>

This makes slot bindings more consistent as the behavior is undefined when for example the default slot is from a list and the named slot is not.

To fix this, make the bindings you need available on the named slot (or default slot) and bind to them there.

<script>
	import Nested from './Nested.svelte';
</script>

<Nested let:count>
	<p>
		count in default slot - is available: {count}
	</p>
--	<p slot="bar">
++	<p slot="bar" let:count>
--		count in bar slot - is not available: {count}
++		count in bar slot - is now available: {count}
	</p>
</Nested>

PR description

Fixes #5865
Fixes #5684
Fixes #7245
Fixes #7709

@Rich-Harris this takes an opposite approach of #2419 from fixing #2320
where defining the let:value on Component, <Component let:value> will only apply to the default slot.

To make it clear,

  • it will not create a new scope on the <Component> level
    • using value in named slot will have "missing-declaration" warning
  • it will emit warnings, discouraging using let: on the <Component>
    • only if there's other named slots within <Component >

#2419 exposes the default slot data to named slot:

<!-- Component.svelte -->
<slot data="123" />
<slot name="foo" />

<!-- App.svelte -->
<Component let:data>
  <svelte:fragment slot="foo">
    {data}
  </svelte:fragment>
</Component>

This assumes that the default slot will always be there whenever foo slot exists, and there will be 1 default slot.
This immediately turns complicated and does not make sense if there's multiple of default <slot />

{#each [1,2,3] as item}
  <slot data={item} />
{/each}
<slot name="foo" />

This MR fixes #2320 with a separate direction, where specifying let:data in the <Component> attribute will be solely for default slot and will not be available to the named slot.

Before submitting the PR, please make sure you do the following

  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

@tanhauhau tanhauhau changed the title Tanhauhau/gh 5865 Do not expose default slot let bindings to named slots Mar 4, 2021
@tanhauhau tanhauhau force-pushed the tanhauhau/gh-5865 branch 2 times, most recently from 12c9e62 to 76b3472 Compare March 4, 2021 02:08
@tanhauhau tanhauhau force-pushed the tanhauhau/gh-5865 branch from a1edc91 to 716eb89 Compare March 4, 2021 02:45
@dummdidumm
Copy link
Member

If we decide to go with it we can only do so for v4, as it's a breaking change

@dummdidumm dummdidumm added this to the 4.x milestone Feb 22, 2023
@dummdidumm

This comment was marked as outdated.

@dummdidumm dummdidumm closed this Mar 31, 2023
@gtm-nayan gtm-nayan reopened this May 26, 2023
@vercel
Copy link

vercel bot commented May 26, 2023

@tanhauhau is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

@gtm-nayan gtm-nayan changed the base branch from master to version-4 May 26, 2023 11:04
Copy link
Member

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good mostly, left a few comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

4 participants