javascript / beginner
Snippet
Using Slots for Content Projection
Slots allow components to accept arbitrary HTML content from their parents. This makes components highly reusable as layout wrappers or containers.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Card.svelte --><div class="card"><slot>Default content if nothing is provided</slot></div><!-- App.svelte --><Card><h3>Custom Title</h3><p>This goes into the slot.</p></Card>
svelte
Breakdown
1
<slot>
Defines the placeholder where the parent component's children will be rendered.
2
Default content...
Text inside the slot tag serves as fallback content.