<slot>
在 Svelte 5 中，內容可以透過 片段 的形式傳遞給組件，並使用 render 標籤 來呈現。
在舊版模式中，組件標籤內的內容被視為插槽內容，該內容可以使用 <slot> 元素由組件呈現。
App
<script>
import Modal from './Modal.svelte';
</script>
<Modal>This is some slotted content</Modal>Modal
<div class="modal">
<slot></slot>
</div>如果您想呈現一般的
<slot>元素，您可以使用<svelte:element this={'slot'} />。
具名插槽
除了預設插槽之外，組件還可以有具名插槽。在父層方面，將 slot="..." 屬性新增到元素、組件或 <svelte:fragment>（直接位於組件標籤內）。
App
<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="..."> 元素
Modal
<div class="modal">
<slot></slot>
<hr>
<slot name="buttons"></slot>
</div>預設內容
如果沒有提供插槽內容，組件可以透過將內容放置在 <slot> 元素內來定義預設內容
<slot>
This will be rendered if no slotted content is provided
</slot>將資料傳遞到插槽內容
插槽可以呈現零次或多次，並且可以使用 props 將值回傳給父層。父層使用 let: 指令將這些值公開給插槽模板。
FancyList
<ul>
{#each items as data}
<li class="fancy">
<!-- 'item' here... -->
<slot item={process(data)} />
</li>
{/each}
</ul>App
<!-- ...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" />App
<FancyList {items}>
<div slot="item" let:item>{item.text}</div>
<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>