Why Slot basics (default slot) in Svelte? - Purpose & Use Cases

The Big Idea

Discover how to make your components magically accept any content you want inside!

The Scenario

Imagine building a webpage where you want to reuse a card component but show different content inside each card manually by copying and pasting HTML everywhere.

The Problem

Manually copying and changing content inside repeated components is boring, error-prone, and hard to update later. You might forget to change some parts or create inconsistent layouts.

The Solution

Svelte's default slot lets you create a reusable component with a placeholder area. You can put any content inside that placeholder when you use the component, making it flexible and easy to maintain.

Before vs After

✗ Before

<div class="card"> <p>Title 1</p> <p>Content 1</p> </div> <div class="card"> <p>Title 2</p> <p>Content 2</p> </div>

✓ After

<Card> <p>Title 1</p> <p>Content 1</p> </Card> <Card> <p>Title 2</p> <p>Content 2</p> </Card>

What It Enables

You can build flexible, reusable components that accept any content inside, making your code cleaner and easier to update.

Real Life Example

Think of a photo frame where you can easily swap the picture inside without changing the frame itself. Slots let you swap content inside components just like that.

Key Takeaways

Manual content repetition is slow and error-prone.

Default slots provide a flexible placeholder inside components.

This makes components reusable with different inner content easily.