SvelteLegacy APIs

<svelte:fragment>

The <svelte:fragment> 元素允许您在不将其包裹在容器 DOM 元素中时将内容放置在命名槽中。这保持了您文档的流式布局。

Widget

<div>
	<slot name="header">No header was provided</slot>
	<p>Some content between header and footer</p>
	<slot name="footer" />
</div>

App

<script>
	import Widget from './Widget.svelte';
</script>

<Widget>
	<h1 slot="header">Hello</h1>
	<svelte:fragment slot="footer">
		<p>All rights reserved.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

<script lang="ts">
	import Widget from './Widget.svelte';
</script>

<Widget>
	<h1 slot="header">Hello</h1>
	<svelte:fragment slot="footer">
		<p>All rights reserved.</p>
		<p>Copyright (c) 2019 Svelte Industries</p>
	</svelte:fragment>
</Widget>

[注意] 在 Svelte 5+ 中，此概念已过时，因为片段不会创建包装元素

Edit this page on GitHub llms.txt

previous next

$$slots <svelte:component>