Conditional Slot Forwarding is not a thing in Svelte 4

Published:

If you ever wanted to forward conditional slots up two component levels, you’re out of luck.

<!-- Grandchild -->
<slot name="label" />
<!-- Child -->
{#if $$slots.label}
  <slot name="label" slot="label" />
{/if}

Conditional Slot Forwarding is probably never gonna be a thing in Svelte 4.

Tan Li Hau has created a PR to make this possible, but Rich Harris closed the PR, stating that snippets (a Svelte 5 feature that replaces slots) will resolve this use case.

We can only hope that Svelte 5 indeed solves this issue — and that porting over Svelte 4 code will not be too much of a pain!

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!