Svelte • Legacy APIs

<svelte:fragment>

The <svelte:fragment> element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.

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

<script lang="ts">
	import type Widget = SvelteComponent<Record<string, any>, any, any>
const Widget: LegacyComponentTypeWidget from './Widget.svelte';
</script>

<const Widget: LegacyComponentTypeWidget>
	<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>
	import type Widget = SvelteComponent<Record<string, any>, any, any>
const Widget: LegacyComponentTypeWidget from './Widget.svelte';
</script>

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

In Svelte 5+, this concept is obsolete, as snippets don’t create a wrapping element