Component Slots

Pass content into components using slots

Card with All Slots

Header, body (default), and actions slots are all provided.

Card Title

This is the card body content passed via the default slot.

Nested Live Component

Slots can contain live components! The counter below is fully interactive.

Interactive Card

This card contains a nested Counter component:

5

Simple Card (Default Slot Only)

When header and actions slots aren't provided, they're simply not rendered.

This card only uses the default slot. No header or actions. The component handles missing slots gracefully.

How Slots Work

Creating slots: 
slots(
    t"Default content",        # positional = default slot
    header=t"Header content",  # named slot
    actions=t"Footer content"  # named slot
)
Accessing in component: 
def template(self, assigns, meta):
    header = meta.slots.get("header", t"")
    body = meta.slots.get("default", t"Fallback")
    return t"<div>{header}{body}</div>"
Key points:
  • Use slots() helper to create slot dict
  • Access via meta.slots['name'] or .get()
  • Slots can contain any template content, including live components
  • Use .get() with fallback for optional slots