<slot>
Svelte 5では、コンテンツはスニペットの形でコンポーネントに渡され、renderタグを使用してレンダリングされます。
レガシーモードでは、コンポーネントタグ内のコンテンツはスロットコンテンツとみなされ、<slot>要素を使用してコンポーネントによってレンダリングされます。
アプリ
<script>
import Modal from './Modal.svelte';
</script>
<Modal>This is some slotted content</Modal>モーダル
<div class="modal">
<slot></slot>
</div>通常の
<slot>要素をレンダリングする場合は、<svelte:element this={'slot'} />を使用できます。
名前付きスロット
コンポーネントには、デフォルトのスロットに加えて名前付きスロットを含めることができます。親側では、コンポーネントタグの内部にある要素、コンポーネント、または<svelte:fragment>にslot="..."属性を追加します。
アプリ
<script>
import Modal from './Modal.svelte';
let open = true;
</script>
{#if open}
<Modal>
This is some slotted content
<div slot="buttons">
<button on:click={() => open = false}>
close
</button>
</div>
</Modal>
{/if}子側では、対応する<slot name="...">要素を追加します。
モーダル
<div class="modal">
<slot></slot>
<hr>
<slot name="buttons"></slot>
</div>フォールバックコンテンツ
スロットコンテンツが提供されない場合、コンポーネントは<slot>要素の中にフォールバックコンテンツを配置することで定義できます。
<slot>
This will be rendered if no slotted content is provided
</slot>スロットコンテンツへのデータの受け渡し
スロットはゼロ回以上レンダリングでき、プロパティを使用して値を親に返すことができます。親は、let:ディレクティブを使用して値をスロットテンプレートに公開します。
FancyList
<ul>
{#each items as data}
<li class="fancy">
<!-- 'item' here... -->
<slot item={process(data)} />
</li>
{/each}
</ul>アプリ
<!-- ...corresponds to 'item' here: -->
<FancyList {items} let:item={processed}>
<div>{processed.text}</div>
</FancyList>通常の省略記法のルールが適用されます。let:itemはlet:item={item}と同等であり、<slot {item}>は<slot item={item}>と同等です。
名前付きスロットも値を公開できます。let:ディレクティブは、slot属性を持つ要素に追加します。
FancyList
<ul>
{#each items as item}
<li class="fancy">
<slot name="item" item={process(data)} />
</li>
{/each}
</ul>
<slot name="footer" />アプリ
<FancyList {items}>
<div slot="item" let:item>{item.text}</div>
<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>