What is svelte:fragment in Svelte: Explanation and Example

svelte:fragment is a special Svelte tag that lets you group multiple elements or components without adding extra HTML tags to the DOM. It works like an invisible wrapper, useful when you want to return multiple elements from a component or slot without extra markup.

How It Works

Imagine you want to hand over a group of items to a friend, but you don't want to wrap them in a box because the box would get in the way. svelte:fragment acts like that invisible box. It groups multiple elements together so Svelte can handle them as one, but it doesn't create any extra HTML tags in the final page.

This is helpful because sometimes you need to return or pass multiple elements from a component or slot, but HTML requires a single root element. Using svelte:fragment solves this by letting you group elements logically without changing the page structure.

It works behind the scenes by telling Svelte to treat the grouped elements as a single unit, but when rendering, it unwraps them so no extra tags appear in the browser.

Example

This example shows a component using svelte:fragment to return two paragraphs without wrapping them in a div or other tag.

svelte

<script>
  export let showExtra = false;
</script>

<svelte:fragment>
  <p>This is the first paragraph.</p>
  {#if showExtra}
    <p>This is an extra paragraph shown conditionally.</p>
  {/if}
</svelte:fragment>

Output

<p>This is the first paragraph.</p>
<p>This is an extra paragraph shown conditionally.</p>

When to Use

Use svelte:fragment when you need to group multiple elements or components but don't want to add extra HTML tags that might affect styling or layout. Common cases include:

• Returning multiple elements from a component without a wrapper tag.
• Passing multiple elements into a slot where only one root is allowed.
• Conditionally rendering groups of elements without extra markup.

It helps keep your HTML clean and your styles simpler by avoiding unnecessary wrappers.

Key Points

• svelte:fragment groups elements without adding extra HTML tags.
• It is useful for returning or passing multiple elements where only one root is allowed.
• Helps keep the DOM clean and styling straightforward.
• Acts like an invisible wrapper in Svelte templates.

Key Takeaways

svelte:fragment lets you group multiple elements without extra HTML wrappers.

Use it to return or pass multiple elements where only one root is allowed.

It keeps your HTML clean and avoids unwanted layout changes.

Think of it as an invisible container that doesn't appear in the DOM.