A component can specify fallbacks for any slots that are left empty, by putting content inside the <slot> element:
Card.svelte
<div class="card">
<header>
<slot name="telephone">
<i>(telephone)</i>
</slot>
<slot name="company">
<i>(company name)</i>
</slot>
</header>
<slot>
<i>(name)</i>
</slot>
<footer>
<slot name="address">
<i>(address)</i>
</slot>
</footer>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
import Card from './Card.svelte';
</script>
<main>
<Card>
<span>Patrick BATEMAN</span>
<span>Vice President</span>
<span slot="telephone">212 555 6342</span>
<span slot="company">
Pierce & Pierce
<small>Mergers and Aquisitions</small>
</span>
<span slot="address">358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534</span>
</Card>
<Card />
</main>
<style>
main {display: flex;
flex-direction: column;
justify-content: center;
gap: 2em;
grid-template-rows: 1fr 1fr;
place-items: center;
height: 100%;
background: url(./wood.svg);
}
small {display: block;
font-size: 0.6em;
text-align: right;
}
@media (min-aspect-ratio: 3.5 / 2.0) { main {flex-direction: row;
}
}
</style>