Skip to main content

要素が子を持つことができるように…

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

…コンポーネントもそうすることができます。しかしコンポーネントが子を受け入れる前に、どこに子を置くかを知っておく必要があります。これを <slot> 要素で行います。これを Card.svelte の中に入れてください:

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

これで 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