Why Named slots in Svelte? - Purpose & Use Cases

The Big Idea

Discover how named slots can turn your rigid layouts into flexible, reusable building blocks!

The Scenario

Imagine building a webpage layout where you want to insert different pieces of content into specific areas like header, sidebar, and footer manually by editing the HTML every time.

The Problem

Manually placing content in fixed spots means you must rewrite or duplicate code often. It's easy to make mistakes, and changing the layout requires touching many files, which is slow and confusing.

The Solution

Named slots let you define placeholders with names inside a component. You can then fill each named slot with different content from outside, keeping your layout flexible and your code clean.

Before vs After

✗ Before

<MyLayout>
  <header>Title</header>
  <main>Main content</main>
  <footer>Footer info</footer>
</MyLayout>

✓ After

<MyLayout>
  <div slot="header">Title</div>
  <div slot="main">Main content</div>
  <div slot="footer">Footer info</div>
</MyLayout>

What It Enables

Named slots enable you to build reusable components with flexible, well-organized content areas that anyone can customize easily.

Real Life Example

Think of a blog post component where the author wants to insert a custom header, sidebar ads, and a footer note without changing the main post structure.

Key Takeaways

Manually placing content is repetitive and error-prone.

Named slots provide clear, flexible placeholders inside components.

This makes your UI code cleaner and easier to maintain.