feat: conditional slots

[tanhauhau]

Implementing sveltejs/rfcs#64

• Fixes Feature: Let slots be wrapped in if statements to avoid "must be a child of a component" error. #5604
• Fixes $$slots with slot forwarding #6059
• Fixes Slots information disappear, when using {#if} inside parent componet #7651

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

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• 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

[vercel]

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

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
svelte-dev-2	❌ Failed (Inspect)			Feb 23, 2023 at 5:57PM (UTC)

[JReinhold]

Does this make it work with {#each} too, or only for {#if} conditions?

Eg. would this work:

<script>
  // an array of tuples, [['slotName', SlotContent],...];
  const someDynamicSlots = getSlots();
</script>

<ChildComponent>
	{#each someDynamicSlots as [name, Content]}
		<Content slot={name} />
	{/each}
</ChildComponent>

This is useful when at compile time you don't know which or how many slots you have, but that might be out of scope for this.

[dummdidumm]

Svelte 5 will substantially rewrite how things works under the hood. Adding such a big enhancement prior to us knowing if it and how it would work in Svelte 5 feels dangerous, so we're holding off from merging until we have more confidence in how Svelte 5 shapes out. Sorry to make everyone wait a little longer, but we're very aware of people wanting such a feature and are thinking actively about it.

[opensas]

Will this make conditionally forwarding named slots in svelte 4 possible?

Right now I get this error if I try to conditionally forward (meaning, only forward it if it was specified) a named slot:

  <!-- 
    Error: Element with a slot='...' attribute must be 
    a child of a component or a descendant of a custom element 
  -->
  {#if $$slots.title}<slot name="title" slot="title" />{/if}

btw, the (clumsy) workaround I found so far is to add an optional slots prop to let caller override the $$slots variable of the child component, like this:

<!-- Title.svelte -->
<script>
	export let slots = $$slots // allow to override $$slots
</script>

<div>
	{#if slots.title}<h3><slot name="title" /></h3>{/if}
	<slot />
</div>

[Rich-Harris]

Closing since slots are superseded by snippets in Svelte 5, which provide the necessary flexibility