Skip to main content

Part 3 / Component composition / Slots

Just like elements can have children...

<div>
	<p>I'm a child of the div</p>
</div>

...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the <slot> element. Put this inside Card.svelte:

Card.svelte
<div class="card ">
	<slot />
</div>

You can now put things on the card:

App.svelte
<Card>
	<span>Patrick BATEMAN</span>
	<span>Vice President</span>
</Card>

Next: Named slots

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
	import Card from './Card.svelte';
</script>
 
<main>
	<Card>
		<!-- content goes here -->
	</Card>
</main>
 
<style>
	main {
		display: grid;
		place-items: center;
		height: 100%;
		background: url(./wood.svg);
	}
</style>
initialising