Svelte Slots Explained — Content Projection

In this tutorial, you will learn about Svelte Slots Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte slots allow components to project content from their parent into specific locations, enabling flexible layout and composition patterns.

What You'll Learn

• Default slots
• Named slots
• Slot fallback content
• Slot props
• Layout components with slots

Why It Matters

Slots enable reusable layout components where the parent controls content placement. They are essential for creating cards, modals, page layouts, and wrapper components.

<!-- Card.svelte -->
<script>
  let { title } = $props();
</script>

<div class="card">
  <div class="card-header">
    <slot name="header">
      <h2>{title}</h2>
    </slot>
  </div>
  <div class="card-body">
    <slot />
  </div>
  <div class="card-footer">
    <slot name="footer" />
  </div>
</div>

<!-- App.svelte -->
<script>
  import Card from "./Card.svelte";
</script>

<Card title="User Profile">
  <p>Name: Alice</p>
  <p>Email: alice@example.com</p>

  <svelte:fragment slot="footer">
    <button>Edit</button>
    <button>Delete</button>
  </svelte:fragment>
</Card>

Expected output: The Card renders with title in the header slot, content in the default slot, and action buttons in the footer slot.