Slot fallback content in Svelte

Introduction

Slot fallback content shows default content when no content is provided by the parent. It helps keep components useful and clear.

You want a reusable component that can show default text or elements if no custom content is given.

You build a card component that should display a message if no title or body is passed.

You create a modal that shows a default button if the user does not provide one.

You want to avoid empty spaces in your UI when slot content is missing.

Syntax

Svelte

<slot>Fallback content here</slot>

The fallback content is placed between the tags inside the component.

If the parent component provides content for the slot, the fallback is ignored.

Examples

This slot shows 'Default text' if no content is passed from the parent.

Svelte

<slot>Default text</slot>

The slot will show a button by default unless the parent provides its own content.

Svelte

<slot><button>Click me</button></slot>

Useful for showing a loading message if no content is given yet.

Svelte

<slot>Loading...</slot>

Sample Program

This example shows a Child component with a slot that has fallback content. In Example 1, no content is passed, so the fallback text appears. In Example 2, the parent passes custom content, so the fallback is replaced.

Svelte

<!-- Child.svelte -->
<script>
  // No script needed here
</script>

<div class="box">
  <slot>Default fallback content</slot>
</div>

<style>
  .box {
    padding: 1rem;
    border: 2px solid #007acc;
    border-radius: 0.5rem;
    font-family: sans-serif;
    color: #007acc;
  }
</style>

<!-- App.svelte -->
<script>
  import Child from './Child.svelte';
</script>

<h2>Example 1: No slot content</h2>
<Child />

<h2>Example 2: With slot content</h2>
<Child>
  <p>This is custom content passed from the parent.</p>
</Child>

Important Notes

Fallback content only appears if the parent does not provide anything for that slot.

You can style fallback content just like any other content inside the component.

Summary

Slots let you insert content into components from outside.

Fallback content shows a default if no content is given.

This keeps your UI clear and avoids empty spaces.