javascript / intermediate
Snippet
Multi-Slot Distribution with Named Slots
Named slots allow a component to accept multiple pieces of content and place them in specific locations. Using the 'slot' attribute on elements inside the parent maps them to the matching 'name' attribute in the child.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<!-- Card.svelte --><div class="card"><header><slot name="header">Default Header</slot></header><main><slot>Standard content</slot></main></div><!-- App.svelte --><Card><h1 slot="header">Custom Title</h1><p>This goes into the default slot.</p></Card>
svelte
Breakdown
1
<slot name="header">
Defines a named placeholder with optional fallback content.
2
slot="header"
Directs the parent's element into the corresponding named slot in the child.