Default Slot

How the default slot works

A <slot> element with no name attribute is the default slot. All light-DOM children that do not have a slot attribute are distributed there. You place the <slot> inside your shadow root, and the browser takes care of rendering the projected children at that position.

<my-box>
  <p>This paragraph is projected into the default slot.</p>
</my-box>

class MyBox extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        :host { display: block; border: 2px solid #6366f1; padding: 1rem; border-radius: 8px; }
      </style>
      <slot><em>No content provided</em></slot>
    `;
  }
}
customElements.define('my-box', MyBox);

Fallback content

Content placed inside the <slot> element itself is the fallback. It renders only when no light-DOM children are projected into that slot. If the consumer provides children, the fallback is hidden; if they provide none, the fallback shows.

This is a zero-cost way to make a component self-documenting: the fallback text describes what the consumer is expected to supply.

Slot projection is not a copy

The light-DOM child stays in the light DOM — only its rendering position moves to the slot. The node is not cloned or transferred. For example, document.querySelector('my-box').firstChild still returns the <p> element even after it has been projected into the shadow root. Event listeners attached to the light-DOM node continue to work normally.

HTMLJS

<my-box> <p>Hello from light DOM!</p> </my-box> <hr> <my-box></my-box>

🧩 Fallback content is free documentation

The content placed inside a <slot> element acts as fallback when nothing is projected. It doubles as in-place documentation for component consumers.

Which light-DOM children are projected into the default slot?

Children with slot='default' Children with no slot attribute The first child only All children, regardless of slot attribute

When does fallback content inside a `<slot>` render?

Always Only when the element has no shadow root When no light-DOM children are projected into that slot When the slot has the fallback attribute

After slot projection, where does the light-DOM child node live in the DOM?

Inside the shadow root It is moved into the shadow root permanently It remains in the light DOM and is only rendered at the slot position It is cloned into the shadow root

Submit

Mark as complete