The slot Element in Web Components

Technical Deep Dive & Specifications

Default vs. Named Slots and Fallback Content

+---------------------------------------------------------------------------------------------------+
|                                      SLOT CLASSIFICATION MATRIX                                   |
+---------------------------------------------------------------------------------------------------+
| Type          | Markup in Shadow DOM                     | Light DOM Consumer Assignment          |
+---------------+------------------------------------------+----------------------------------------+
| Default Slot  | <slot></slot>                            | Any unslotted child element or text.   |
| Named Slot    | <slot name="header"></slot>              | <h2 slot="header">Title</h2>           |
| Fallback Slot | <slot name="icon"><span>⭐</span></slot> | If consumer omits slot="icon", ⭐ renders|
+---------------------------------------------------------------------------------------------------+

The Light DOM vs. Shadow DOM Lifecycle & DOM Trees

A critical architectural concept in Web Components is that projected elements do NOT move in the DOM tree:

1. In the live DOM, <h2 slot="title"> remains a child of <custom-card>.
2. Inspecting <custom-card>.children in JavaScript returns the Light DOM nodes.
3. The browser compositor merges the Light DOM and Shadow DOM into a Flattened Tree for rendering.

+-----------------------------------------------------------------------------+
| DOM Tree (Developer View)                  Flattened Tree (Rendering View)  |
+-----------------------------------------------------------------------------+
| <user-card>                                <user-card>                      |
|   ├── #shadow-root                         │  └── <div class="box">         |
|   │     └── <div class="box">              │        ├── <h3>Alice</h3>      |
|   │           └── <slot name="name">       │        └── <p>Admin</p>        |
|   └── <h3 slot="name">Alice</h3>           └────────────────────────────────┘
+-----------------------------------------------------------------------------+

JavaScript APIs: Inspecting Distributed Nodes

The HTML Slot element interface (HTMLSlotElement) provides dedicated programmatic inspection methods:

const slot = shadowRoot.querySelector('slot[name="title"]');

// 1. Get all assigned DOM nodes (including text/whitespace)
const nodes = slot.assignedNodes({ flatten: true });

// 2. Get only assigned HTML elements
const elements = slot.assignedElements();

// 3. React to dynamic consumer additions/removals
slot.addEventListener('slotchange', (event) => {
  console.log('Slot content mutated!', slot.assignedElements());
});

Styling Slotted Elements with ::slotted()

Shadow DOM stylesheets cannot arbitrarily reach deep into Light DOM elements. The ::slotted() pseudo-element provides controlled styling access to top-level projected elements:

/* Inside Web Component Shadow DOM CSS */
::slotted(h2) {
  color: #1e40af;
  font-size: 1.5rem;
  margin-top: 0;
}

/* ::slotted only targets direct top-level projected nodes! */
/* ❌ DOES NOT WORK on nested children inside slotted nodes: */
::slotted(div p) { color: red; } 

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 18 (<modal-dialog>): Instantiates the custom element in the Light DOM.
• Line 19 (<h2 slot="header">): Assigns this <h2> to the Shadow DOM slot named "header".
• Line 20–21 (<p>...): Unnamed content automatically projects into the default <slot></slot>.
• Line 22 (<button slot="footer">): Projects into the "footer" slot.
• Line 66 (<slot name="header">): The Shadow DOM anchor. If the consumer provides slot="header", it renders; otherwise, the fallback <h2>Notice</h2> renders.
• Line 71 (<slot><p>No dialog content provided.</p></slot>): The default slot with fallback placeholder text.
• Line 58–62 (::slotted(h2)): Styles any top-level <h2> projected into the Shadow DOM.

Expected Browser Render Output

Modal 1:
+-------------------------------------------------------------------+
| Confirm Cluster Deletion                                          |
| ----------------------------------------------------------------- |
| Are you sure you want to delete production cluster us-east-prod?  |
| This action is irreversible and drops all active database replicas|
| ----------------------------------------------------------------- |
|                                                [Confirm Deletion] |
+-------------------------------------------------------------------+

Modal 2 (Fallback Content Rendered):
+-------------------------------------------------------------------+
| Notice                                                            |
| ----------------------------------------------------------------- |
| This modal relies on the component's internal fallback header and |
| footer.                                                           |
| ----------------------------------------------------------------- |
|                                                         [Dismiss] |
+-------------------------------------------------------------------+