<slot>
在 Svelte 5 中，内容可以通过片段的形式传递给组件，并使用渲染标签进行渲染。
在传统模式下，组件标签内的内容被视为 插槽内容，可以通过组件使用 <slot> 元素进行渲染：
App
<script>
import Modal from './Modal.svelte';
</script>
<Modal>This is some slotted content</Modal><script lang="ts">
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}<script lang="ts">
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>