How to Use Named Slot in Svelte: Syntax and Examples

In Svelte, use <slot name="slotName"></slot> inside a component to define a named slot, and pass content to it by wrapping it with <element slot="slotName">...</element> when using the component. Named slots let you insert different content into specific areas of a component.

Syntax

To create a named slot inside a Svelte component, use the <slot> element with a name attribute. When using the component, provide content for that slot by adding the slot attribute with the matching name to the element you want to insert.

• Inside component: Define named slots with <slot name="slotName"></slot>.
• When using component: Pass content with <element slot="slotName">...</element>.

svelte

<!-- Inside Child.svelte -->
<slot name="header"></slot>
<slot></slot> <!-- default slot -->
<slot name="footer"></slot>

Example

This example shows a Card component with named slots for header and footer. When using Card, you provide content for these slots by adding the slot attribute to elements.

svelte

<!-- Card.svelte -->
<div class="card">
  <header class="card-header">
    <slot name="header">Default Header</slot>
  </header>
  <main class="card-body">
    <slot>Default Body Content</slot>
  </main>
  <footer class="card-footer">
    <slot name="footer">Default Footer</slot>
  </footer>
</div>


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

<Card>
  <h1 slot="header">Welcome!</h1>
  <p>This is the main content of the card.</p>
  <small slot="footer">© 2024</small>
</Card>

Output

<div class="card">
  <header class="card-header">
    <h1>Welcome!</h1>
  </header>
  <main class="card-body">
    <p>This is the main content of the card.</p>
  </main>
  <footer class="card-footer">
    <small>© 2024</small>
  </footer>
</div>

Common Pitfalls

• Forgetting to add the slot attribute on the content elements when passing to named slots results in content going to the default slot or not showing.
• Using the wrong slot name in the slot attribute means the content won't appear in the intended place.
• Named slots must be defined with a name attribute inside the component; otherwise, they are treated as default slots.

svelte

<!-- Wrong usage: missing slot attribute -->
<Card>
  <h1>Header without slot attribute</h1> <!-- Goes to default slot, not header -->
  <p>Main content</p>
</Card>

<!-- Correct usage -->
<Card>
  <h1 slot="header">Proper Header</h1>
  <p>Main content</p>
</Card>

Quick Reference

Named Slot Usage Summary:

Concept	Syntax	Description
Define named slot		Place in component to mark where named content goes
Pass content to named slot	Content	Wrap content with slot attribute matching the name
Default slot		Content without slot attribute goes here
Missing slot attribute	N/A	Content goes to default slot, not named slots

Key Takeaways

Use inside components to define named slots.

Pass content with matching slot="name" attribute when using the component.

Content without a slot attribute goes to the default slot.

Ensure slot names match exactly to display content correctly.

Named slots help organize and customize component content clearly.