Named slots

Advanced Svelte / Component composition

Part 2/ Component composition/Named slots

前回の例には default slot があり、それはコンポーネントの直接の子をレンダリングするものでした。時々、配置場所をもっとコントロールしなければならないときがあると思います。そのような場合は、 named slots を使用することができます。

App.svelte の中で、<span slot="telephone"> や company、address を子として持つ <Card> コンポーネントをレンダリングしようとしています。これに対応するように、named slots を Card.svelte に追加しましょう:

<div class="card">
	<header>
		<slot name="telephone" />
		<slot name="company" />
	</header>

	<slot />
		
	<footer>
		<slot name="address" />
	</footer>
</div>

App.svelte の <small> 要素にいくつかスタイルを追加して、自身の行におさまるようにします。<Card> のコンテンツは Card.svelte から font-family (この書体は 'Silian Rail' と呼ばれます) などのスタイルを継承しますが、通常のスコープのルールが適用されるため、この要素がある場所、つまり App.svelte にスタイルを追加します:

<style>
	main {
		display: grid;
		place-items: center;
		height: 100%;
		background: url(./wood.svg);
	}

	small {
		display: block;
		font-size: 0.6em;
		text-align: right;
	}
</style>

別の方法として、Card.svelte の中で :global 修飾子を使用して .card の内側にあるすべての small 要素をターゲットにすることができます:

<style>
	/* ... */ 

	.card :global(small) {
		display: block;
		font-size: 0.6em;
		text-align: right;
	}
</style>