feat: conditional slots

[tanhauhau]

Implementing https://github.com/sveltejs/rfcs/pull/64

• Fixes https://github.com/sveltejs/svelte/issues/5604
• Fixes https://github.com/sveltejs/svelte/issues/6059
• Fixes https://github.com/sveltejs/svelte/issues/7651

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

• [x] 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
• [x] Prefix your PR title with feat:, fix:, chore:, or docs:.
• [x] This message body should clearly illustrate what problems it solves.
• [x] Ideally, include a test that fails without this PR but passes with it.

Tests

• [x] Run the tests with npm test and lint the project with npm run lint

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[vercel[bot]]

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.

[emmnull]

I'm currently designing the structure of a few composable components for a project and was wondering if this feature is still projected for 3.x or if it is more likely to be postponed to 4.x? (p.s. I really don't want to come off as putting pressure or anything, I know the core team is already hard at work on quite a few features. Simply curious as knowing this can steer some decisions on my side.)

[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