What is the difference between a named slot and the default slot?

A with no name is the default slot and receives any light-DOM child that has no slot attribute. A only receives children whose slot='x'. There can be at most one default slot; extra unnamed slots stay empty. Unmatched children are not rendered.

When does the slotchange event fire?

slotchange fires on a slot element whenever its set of assigned (flattened) nodes changes — children added, removed, or reassigned to a different slot. It does NOT fire for changes inside an already-assigned node's subtree, so it is not a substitute for a MutationObserver on deep content.

What is the difference between assignedNodes and assignedElements?

assignedNodes() returns all assigned nodes including text nodes and comments, while assignedElements() returns only Element nodes. Both accept { flatten: true } to resolve nested slots and fall back to the slot's own default content when nothing is assigned.

How do I style projected content?

Use the ::slotted() pseudo-element from inside the shadow root, e.g. ::slotted(p) { margin: 0 }. It can only target the top-level assigned nodes (not their descendants) and only with a compound selector. Slotted nodes otherwise inherit styles from the light DOM, not the shadow DOM.

What does mode open vs closed mean?

attachShadow({ mode: 'open' }) exposes the shadow root via element.shadowRoot, while mode: 'closed' returns null there, hiding the root from outside script. Closed is not a real security boundary — the element instance still holds the reference — but it discourages external access.

Shadow DOM Slot API Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Slots project light-DOM children into a component’s shadow tree. This reference covers the <slot> element, named slots, the slotchange event, the assignedNodes/assignedElements APIs, ::slotted() styling and the attachShadow options.

How it works

A component places <slot> elements in its shadow root. The browser then assigns the host’s light-DOM children into those slots to form the flattened tree that is actually rendered:

<my-card>
  <h2 slot="title">Hello</h2>   <!-- → <slot name="title"> -->
  <p>Body text</p>              <!-- → default <slot> -->
</my-card>

Inside the shadow root:

<div class="head"><slot name="title"></slot></div>
<div class="body"><slot></slot></div>

Children with a matching slot="..." attribute go to the named slot; everything else goes to the single default (unnamed) slot. Unmatched children render nothing. A slot’s own contents act as fallback shown only when no nodes are assigned.

Reacting and styling

Listen for slotchange on a slot to know when its assigned nodes change. It fires for assignment changes, not for mutations inside an already-assigned node.
Read what is assigned with slot.assignedElements({ flatten: true }) (elements only) or assignedNodes() (includes text/comments).
Style top-level projected nodes from the shadow root with ::slotted(selector) — it cannot reach descendants of assigned nodes.
attachShadow({ mode }) controls whether element.shadowRoot is exposed (open) or null (closed); delegatesFocus: true forwards focus to the first focusable child.