DEV Community

Tan Li Hau
Tan Li Hau

Posted on • Edited on

Explain Svelte slots like I'm five

#svelte #slot #tutorial #beginners

If you prefer watching video tutorials, you can watch me explain slots on YouTube

Watch on YouTube

What is a slot?

Just like element, you can pass child element to Components

<div> <div>Children</div> </div> <Component> <div>Children</div> </Component>
Enter fullscreen mode Exit fullscreen mode

However, the child elements passed to a Component won't show up on the screen, unless explicitly specified using a <slot> element in the Component.

The <slot> element decides where to insert the child elements of the Component

<!-- Component.svelte --> Some content #1 <slot /> Some content #2 <!-- What you'll see on the DOM --> Some content #1 <div>Children</div> Some content #2
Enter fullscreen mode Exit fullscreen mode

You can use the <slot> element multiple times, it just means you want to insert the child elements multiple times in various places

<!-- Component.svelte --> Some content #1 <slot /> Some content #2 <slot /> <slot /> Some content #3 <slot /> Some content #4 <!-- What you'll see on the DOM --> Some content #1 <div>Children</div> Some content #2 <div>Children</div> <div>Children</div> Some content #3 <div>Children</div> Some content #4
Enter fullscreen mode Exit fullscreen mode

Named Slot

But sometimes you want to have some of the child elements inserted at 1 place, and the other in another place....

That's when you want a named slot!

<!-- Component.svelte --> <slot name="header" /> Some Content here <slot name="footer" />
Enter fullscreen mode Exit fullscreen mode

To specify which elements go to which named slots, you use the slot="xxx" attribute

<Component> <div slot="header">Header</div> <div slot="footer">Footer</div> </Component> <!-- What you'll see on the DOM --> <div slot="header">Header</div> Some Content here <div slot="footer">Footer</div>
Enter fullscreen mode Exit fullscreen mode

svelte:fragment

Unfortunately, if you want multiple elements going into the same slot, specifying the same slot attribute value to more than one elements end up with an error ⚠️😢

<Component> <div slot="header">Header #1</div> <div slot="header">Header #2</div> <div slot="footer">Footer</div> </Component> <!-- ⚠️ Duplicate slot name "header" in <Component> -->
Enter fullscreen mode Exit fullscreen mode

That's when you use a <svelte:fragment> to group them!

<Component> <svelte:fragment slot="header"> <div>Header #1</div> <div>Header #2</div> </svelte:fragment> <div slot="footer">Footer</div> </Component> <!-- What you'll see on the DOM --> <div>Header #1</div> <div>Header #2</div> Some Content here <div slot="footer">Footer</div>
Enter fullscreen mode Exit fullscreen mode

Docs: <svelte:fragment>

Slot fallback

Finally, what happens if you didn't pass elements to the Component, but the Component expects something with a slot?

Nothing happens!

<Component> </Component> <!-- What you'll see on the DOM -->
Enter fullscreen mode Exit fullscreen mode

Of course, you can always provide a fallback content if nothing is provided 😅

<!-- Component.svelte --> <slot>Fallback content</slot> <!-- What you'll see on the DOM --> Fallback content
Enter fullscreen mode Exit fullscreen mode

Reference

Top comments (2)

Collapse
 
bandit profile image
James Nisbet •

👍

Collapse
 
bmitchinson profile image
Ben Mitchinson •

Thanks for this writeup!