在 Svelte 5 中，内容可以通过[片段](snippet)的形式传递给组件，并使用[渲染标签](@render)进行渲染。

在传统模式下，组件标签内的内容被视为 *插槽内容*，可以通过组件使用 `<slot>` 元素进行渲染：

```svelte
<!--- file: App.svelte --->
<script>
	import Modal from './Modal.svelte';
</script>

<Modal>This is some slotted content</Modal>
```

```svelte
<!--- file: Modal.svelte --->
<div class="modal">
	<slot></slot>
</div>
```

> \[!注意\] 如果您想渲染一个常规的 `<slot>` 元素，您可以使用 `<svelte:element this={'slot'} />` 。

## 
命名槽

组件除了默认插槽外，还可以有*命名*插槽。在父级侧，向元素、组件或组件标签内直接添加`slot="..."`属性，其中[`<svelte:fragment>`](legacy-svelte-fragment)。

```svelte
<!--- file: App.svelte --->
<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="...">` 元素：

```svelte
<!--- file: Modal.svelte --->
<div class="modal">
	<slot></slot>
	<hr>
	+++<slot name="buttons"></slot>+++
</div>
```

## 
回退内容

如果未提供槽位内容，组件可以通过将内容放入 `<slot>` 元素中来定义回退内容：

```svelte
<slot>
	This will be rendered if no slotted content is provided
</slot>
```

## 
传递数据到槽位内容

插槽可以渲染零次或多次，并且可以通过 props 将值*返回*给父组件。父组件使用`let:`指令将值暴露给插槽模板。

```svelte
<!--- file: FancyList.svelte --->
<ul>
	{#each items as data}
		<li class="fancy">
			<!-- 'item' here... -->
			<slot item={process(data)} />
		</li>
	{/each}
</ul>
```

```svelte
<!--- file: App.svelte --->
<!-- ...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`\` 属性的元素。

```svelte
<!--- file: FancyList.svelte --->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot name="item" item={process(data)} />
		</li>
	{/each}
</ul>

<slot name="footer" />
```

```svelte
<!--- file: App.svelte --->
<FancyList {items}>
	<div slot="item" let:item>{item.text}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>
```