The slot Element & Content Projection

Technical Deep Dive & Specifications

Light DOM vs Shadow DOM vs Composed Tree

When working with Web Components and <slot> elements, the browser manages two parallel node trees that merge during rendering into a single Composed (Flattened) Tree:

1. LOGICAL DOM TREE (What querySelector and DOM inspectors see):
<my-container> ────────────────────────┐ (Light DOM children stay here!)
  <p>Hello from consumer Light DOM</p> ├──> parentNode is <my-container>
</my-container>                        │
  #shadow-root (open) <────────────────┘
    <div class="frame">
      <slot></slot>  <────────────────── Projection portal
    </div>

2. FLATTENED COMPOSED TREE (What the browser renders and paints):
<my-container>
  <div class="frame">
    <p>Hello from consumer Light DOM</p>  <── Rendered through the slot!
  </div>
</my-container>

[!IMPORTANT] Nodes are NOT moved! Slotted nodes remain children of the host element in the Light DOM. Calling p.parentNode returns <my-container>, NOT the <slot> or #shadow-root.

The Slot Distribution Algorithm

The WHATWG DOM specification defines the slot assignment process:

1. When a Shadow Root is attached, the browser identifies all <slot> elements inside it.
2. The browser examines each child node of the host element (Light DOM).
3. If an element has no slot attribute, it is assigned to the default (unnamed) slot (<slot>).
4. If an element has a slot="foo" attribute, it is assigned to the named slot <slot name="foo">.
5. If no matching slot exists, the light DOM node remains unprojected and is not rendered visually on screen.

Host Element Children (Light DOM)          Shadow Root Slots
+-------------------------------+          +---------------------------+
| <p>Simple text</p>            | -------> | <slot></slot> (Default)   |
| <span slot="title">Logo</span>| -------> | <slot name="title"></slot>|
| <div>Unmatched slot</div>     | -------> | (No match: HIDDEN/IGNORED)|
+-------------------------------+          +---------------------------+

Styling Slotted Content with ::slotted()

Because slotted content originates in the Light DOM, it is subject to specific styling rules:

/* Inside component shadow DOM */
::slotted(p) {
  color: #38bdf8; /* Styles top-level <p> projected through the slot */
  font-size: 1.1rem;
}

/* ANTI-PATTERN: ::slotted cannot pierce nested child tags */
::slotted(p strong) { 
  color: red; /* DOES NOT WORK! Spec forbids compound selectors inside ::slotted() */
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 16–19 (<content-panel ...>): The custom element instantiated in the Light DOM containing two <p> tags as consumer children.
• Line 24 (this.attachShadow({ mode: 'open' })): Attaches an encapsulated Shadow Root to the <content-panel> instance.
• Line 53–58 (::slotted(p)): Targets the top-level <p> elements projected from the Light DOM, resetting margins inside the panel body.
• Line 64 (<slot></slot>): The default slot insertion point. The browser's layout engine distributes both <p> nodes into this exact location in the rendered Composed Tree.

Expected Browser Render Output

(The panel header is styled by the Shadow DOM, the paragraph layout is managed by ::slotted(p), and the .highlight span is styled by the parent Light DOM document.)

+-------------------------------------------------------+
| SYSTEM DIAGNOSTICS                                    |
+-------------------------------------------------------+
| Memory consumption is currently operating at          |
| [42% nominal capacity].                               |
|                                                       |
| All Kubernetes pods in region us-east-1 are reported  |
| healthy.                                              |
+-------------------------------------------------------+