SvelteHow-ToBeginner · 3 min read

How to Use Slot in Svelte: Simple Guide with Examples

In Svelte, use the <slot> element inside a component to create a placeholder for content passed from the parent. This lets you build reusable components that can display different content depending on where they are used.

📐

Syntax

The <slot> tag acts as a placeholder inside a Svelte component. When you use this component, any content placed between its tags replaces the <slot> in the component.

You can also name slots with name="slotName" to allow multiple placeholders and pass content to specific slots.

svelte

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

<Child>
  <p>This content goes into the default slot.</p>
</Child>


<!-- Child.svelte -->
<div>
  <slot></slot> <!-- Default slot -->
</div>

Output

<p>This content goes into the default slot.</p>

💻

Example

This example shows a Card component with a default slot for content and a named slot for a footer. The parent passes different content to each slot.

svelte

<!-- Card.svelte -->
<div style="border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; max-width: 300px;">
  <div>
    <slot></slot> <!-- Default slot for main content -->
  </div>
  <footer style="margin-top: 1rem; font-size: 0.9rem; color: #555;">
    <slot name="footer">Default footer content</slot> <!-- Named slot -->
  </footer>
</div>


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

<Card>
  <h2>Welcome to Svelte</h2>
  <p>This is the main content inside the card.</p>
  <span slot="footer">© 2024 My Company</span>
</Card>

Output

<div style="border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; max-width: 300px;"> <div> <h2>Welcome to Svelte</h2> <p>This is the main content inside the card.</p> </div> <footer style="margin-top: 1rem; font-size: 0.9rem; color: #555;"> <span>© 2024 My Company</span> </footer> </div>

⚠️

Common Pitfalls

Forgetting to use the slot attribute on elements passed to named slots causes content to go to the default slot instead.
Using multiple unnamed <slot> tags in one component will only fill the first one.
Not providing fallback content inside <slot> can lead to empty areas if no content is passed.

svelte

<!-- Wrong usage: missing slot attribute -->
<Card>
  <h2>Title</h2>
  <p>Footer text</p> <!-- Wrong: goes to default slot -->
  <p slot="footer">Footer text</p> <!-- Correct -->
</Card>

<!-- Right usage -->
<Card>
  <h2>Title</h2>
  <p slot="footer">Footer text</p>
</Card>

📊

Quick Reference

<slot>: Default placeholder for content.
<slot name="name">: Named slot for specific content.
Use slot="name" attribute on elements passed to named slots.
Provide fallback content inside <slot> for defaults.

✅

Key Takeaways

Use <slot> inside a component to accept content from its parent.

Name slots with name attribute to allow multiple content placeholders.

Pass content to named slots using the slot attribute on elements.

Provide fallback content inside <slot> to avoid empty areas.

Only one default slot is allowed; multiple unnamed slots will not work as expected.