【Svelte】slotについて

Slot

子コンポーネントに<slot />タグを持たせることで、親コンポーネントから子コンポーネントに要素の受け渡しができる。

Child.svelte

<div class="">
    <slot />
</div>

Parent.svelte

<Child>
    <span>この内容がこコンポーネントの要素として受け渡される</span>
</Child>

名付けをしてこ要素に受け渡すこともできる。
親コンポーネントでは<span slot="名前">受け渡したい値</span>、子コンポーネントでは<slot name="名前"/>のように指定して受け渡しができる。

Child.svelte

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

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

Parent.svelte

<main>
	<Child>
		<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 [phone] telex 10 4534</span>
	</Child>
</main>

スタイルに関しては、親コンポーネントで指定するか、子コンポーネントの中で:global(タグ名)を指定してスタイルの変更ができる。

slotタグの中に要素を入れることで、受け渡されなかった場合に出力する値を指定することができる。

Child.svelte

    <slot>
        <i>何も受け渡されなかった場合、この文章が表示される</i>
    </slot>