Default Slot Demo
Basic Card with Default Slot:

This content is passed through the default slot!

You can put any HTML here.
Card with Default Content (no slot content provided):
Named Slots Demo
Dialog with Named Slots:
Confirmation Required Are you sure you want to delete this item? This action cannot be undone.
Dialog with Partial Slots (using defaults):
Welcome! This dialog only provides title and content, footer uses default.
Mixed Slots Demo
Article with Mixed Slots:

Introduction to Web Components

by John Doe

Web components are a set of web platform APIs that allow you to create custom, reusable HTML tags.

They provide encapsulation and reusability, making them perfect for building scalable applications.

Published on February 2, 2026
How Slots Work
Slot Type Usage Description
<slot> Default slot Accepts any content without slot attribute
<slot name="foo"> Named slot Accepts content with matching slot="foo" attribute
<slot>Default</slot> Fallback content Shown when no content is provided for the slot