Checking Slot Content with $$slots
Inspect $$slots to conditionally render wrapper markup only when a slot is used.
Checking Slot Content with $$slots is a free Sveltejs Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Check Slots
Sometimes you only want to render wrapper markup (border, header) if the slot has content.
The slots Object
Inside a component, $$slots is an object with a property per filled slot.
Truthy When Filled
If a slot has content, its key in $$slots is truthy.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}Avoid Empty Wrappers
Skip rendering wrapper markup when the slot is empty to keep the DOM clean.
Combine with Defaults
You can choose between fallback content and skipping the wrapper entirely.
Reactive Detection
$$slots updates reactively if the slot fill changes between renders.
Use With Multiple Slots
Check each named slot independently.
{#if $$slots.header || $$slots.footer}...Common in Cards
Cards with optional title or footer often use this pattern.
Default Slot Key
The default slot appears under $$slots.default.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
TypeScript users can declare a $$Slots type to get autocomplete on $$slots.
Trade-offs
Adds branching to your markup but produces cleaner output. Worth it for design systems.
Quick Check
What does $$slots.header check?
Recap
Use $$slots.name to detect if a parent filled a slot, and skip wrapper markup when it did not.
Frequently asked questions
Is the “Checking Slot Content with $$slots” lesson free?
Yes — the full text of “Checking Slot Content with $$slots” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Checking Slot Content with $$slots”?
Inspect $$slots to conditionally render wrapper markup only when a slot is used. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Checking Slot Content with $$slots” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Default Slots for Content Projection
- Named Slots with slot="name"
- Slot Fallback Content
- Checking Slot Content with $$slots