Slot Elements for Content Distribution
Project host content into shadow DOM with named and default slots.
Slot Elements for Content Distribution is a free HTML Academy lesson on CoddyKit — lesson 2 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 HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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>Named Slots
Multiple slots can be addressed by name. The shadow declares <slot name="header">; the user opts in with <h1 slot="header">. Children with a matching slot attribute fill that slot; unmatched children fall into the default slot.
// Shadow:
<header><slot name="header"></slot></header>
<main><slot></slot></main>
// Usage:
<my-card>
<h1 slot="header">Title</h1>
<p>Body</p>
</my-card>Slot Fallback Content
Content between the slot tags renders only when nothing is assigned to that slot: <slot>No content provided</slot>. Use it to show placeholder or instructional copy for empty slots.
Style Inheritance Across Slots
Slotted children remain in light DOM and inherit styles from the main document, not the shadow tree. Use the ::slotted() pseudo-element from inside the shadow to style them: ::slotted(p) { color: red; }.
::slotted Limitations
::slotted() can only target direct children of the host (the elements actually distributed into the slot). It cannot target their descendants. For deeper styling, expose CSS custom properties or use ::part on shadow-internal elements instead.
Detecting Slot Changes
Each slot fires a slotchange event when its assigned nodes change. Listen for it to react to dynamic content updates: slot.addEventListener("slotchange", handler). Useful for components whose layout depends on which children are present.
const slot = this.shadowRoot.querySelector("slot");
slot.addEventListener("slotchange", () => {
const nodes = slot.assignedNodes();
console.log("Slot now holds", nodes.length, "nodes");
});assignedNodes and assignedElements
slot.assignedNodes() returns all nodes assigned to a slot (including text nodes). slot.assignedElements() returns just the Element children — usually the one you want when iterating over slotted content programmatically.
Distributing Children
The browser handles all distribution automatically based on the slot attribute on each child. There is no JavaScript step — write <span slot="footer">...</span> in the host's light children and the corresponding shadow slot will contain it.
Slots and Styling the Host
The host's own styles (set on <my-card> in the document) cascade into the light children, including those that end up slotted. Shadow CSS via ::slotted has higher specificity than inherited host styles when both target the same property.
Common Use Cases
Cards with header/body/footer slots, dialogs with title/content/actions slots, list items with leading/trailing slots, navigation menus with item slots. Slots make custom elements composable in the same way that <details>/<summary> or <table>/<tr> are.
Knowledge Check
What is the difference between the default slot and a named slot?
Summary
Slots project light DOM children into specific places in the shadow tree. The default slot takes any unnamed child; named slots take children with matching slot attributes. Fallback content fills empty slots, ::slotted styles direct slotted children, and slotchange events react to dynamic content updates.
Frequently asked questions
Is the “Slot Elements for Content Distribution” lesson free?
Yes — the full text of “Slot Elements for Content Distribution” is free to read here on the web, and the HTML 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 HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Slot Elements for Content Distribution”?
Project host content into shadow DOM with named and default slots. You practise HTML 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 HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Slot Elements for Content Distribution” 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 HTML Academy lesson?
Yes. Every HTML 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
- attachShadow and Shadow Root
- Slot Elements for Content Distribution
- Scoped Styles Inside Shadow DOM
- Part and Exportparts for External Styling