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. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Slot Elements for Content Distribution” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Slot Elements for Content Distribution”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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