Slot Elements for Content Distribution
Project host content into shadow DOM with named and default slots.
Light DOM vs Shadow DOM
Children written inside a custom element in HTML form the element's "light DOM" — they are not in the shadow tree. By default, the browser does not render them; the shadow tree must explicitly request them via <slot>.
The Default Slot
A <slot> element inside the shadow tree marks the spot where the light children should appear. Without a name, it is the default slot and accepts any direct child of the host.
// Shadow:
<div class="frame">
<slot></slot>
</div>
// Usage:
<my-card>
<p>This paragraph appears inside the frame</p>
</my-card>All lessons in this course
- attachShadow and Shadow Root
- Slot Elements for Content Distribution
- Scoped Styles Inside Shadow DOM
- Part and Exportparts for External Styling