<slot>
在 Svelte 5 中，内容可以以代码片段的形式传递给组件，并使用渲染标签进行渲染。
在遗留模式下，组件标签里的内容被视为插槽内容，组件可以使用 <slot> 元素来渲染它：
App
<script>
import Modal from './Modal.svelte';
</script>
<Modal>这是一些插槽内容</Modal><script lang="ts">
import Modal from './Modal.svelte';
</script>
<Modal>这是一些插槽内容</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>
这是一些插槽内容
<div slot="buttons">
<button on:click={() => open = false}>
关闭
</button>
</div>
</Modal>
{/if}<script lang="ts">
import Modal from './Modal.svelte';
let open = true;
</script>
{#if open}
<Modal>
这是一些插槽内容
<div slot="buttons">
<button on:click={() => open = false}>
关闭
</button>
</div>
</Modal>
{/if}在子组件端，添加一个对应的 <slot name="..."> 元素：
Modal
<div class="modal">
<slot></slot>
<hr>
<slot name="buttons"></slot>
</div>后备内容
如果没有提供插槽内容，组件可以通过在 <slot> 元素内放置内容来定义后备内容：
<slot>
如果没有提供插槽内容，将渲染这个
</slot>向插槽内容传递数据
插槽可以被渲染零次或多次，并且可以使用 props 将值传递回父组件。父组件使用 let: 指令将值暴露给插槽模板。
FancyList
<ul>
{#each items as data}
<li class="fancy">
<!-- 这里的 'item'... -->
<slot item={process(data)} />
</li>
{/each}
</ul>App
<!-- ...对应这里的 'item': -->
<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>