0Pricing
Sveltejs Academy · Lesson

Default Slots for Content Projection

Place a element inside a component to accept arbitrary child content.

What Slots Are

Slots let parent components inject markup into specific places in a child component.

The slot Element

Inside a child, place a <slot /> tag where content should appear.

<!-- Card.svelte -->
<div class="card">
  <slot />
</div>

All lessons in this course

  1. Default Slots for Content Projection
  2. Named Slots with slot="name"
  3. Slot Fallback Content
  4. Checking Slot Content with $$slots
← Back to Sveltejs Academy