Skip to main content

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>

Next: Slot props

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 &amp; 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>
initialising