Svelte Slots
How to work with slots in Svelte to define components that can be composed together
Slots are a handy way to let you define components that can be composed together.
And vice versa, depending on your point of view, slots are a handy way to configure a component you are importing.
Here’s how they work.
In a component you can define a slot using the <slot />
(or <slot></slot>
) syntax.
Here’s a Button.svelte
component that simply prints a <button>
HTML tag:
<button><slot /></button>
For React developers, this is basically the same as
<button>{props.children}</button>
Any component importing it can define content that is going to be put into the slot by adding it into the component’s opening and closing tags:
<script>
import Button from './Button.svelte'
</script>
<Button>Insert this into the slot</Button>
You can define a default, which is used if the slot is not filled:
<button>
<slot>
Default text for the button
</slot>
</button>
You can have more than one slot in a component, and you can distinguish one from the other using named slots. The single unnamed slot will be the default one:
<slot name="before" />
<button>
<slot />
</button>
<slot name="after" />
Here’s how you would use it:
<script>
import Button from './Button.svelte'
</script>
<Button>
Insert this into the slot
<p slot="before">Add this before</p>
<p slot="after">Add this after</p>
</Button>
And this would render the following to the DOM:
<p slot="before">Add this before</p>
<button>
Insert this into the slot
</button>
<p slot="after">Add this after</p>
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025