<slot>

<slot> marks where a shadow tree presents content supplied by its host’s light DOM. A template containing a slot does not create a working component by itself; the example must create a shadow root.

A complete slotted component

The script creates a shadow tree for this host. The named paragraph fills the title slot; ordinary content fills the default slot.

<div id="card">
  <p slot="title">Practice a grid</p>
  <p>Change the column ratio and compare the result.</p>
</div>
<script>
  const root = document.querySelector("#card").attachShadow({mode: "open"}); root.innerHTML = '<style>:host { display:block; border:1px solid #94a3b8; padding:1rem; } header { font-weight:bold; }</style><header><slot name="title">Untitled practice</slot></header><slot>Nothing to practice yet.</slot>';
</script>

Names and fallback

A direct host child with slot="title" is assigned to the matching named slot. Children without a slot attribute go to the first unnamed slot. Slot names should be unique in one shadow root; duplicate names do not distribute the same content independently to every matching slot.

Content written inside slot is fallback content, displayed when no nodes are assigned. The supplied nodes remain in the light DOM; slotting presents them without moving them into the shadow tree.

Inspect the result

Remove the paragraph with slot="title" to reveal “Untitled practice.” Merely emptying that paragraph still supplies a node, so it can suppress fallback. Inspect the host’s shadow root and assigned nodes in developer tools.

Slotting does not automatically create accessible names for custom controls. Prefer native buttons and labels when teaching control behavior. The fixed innerHTML here is author-controlled; do not interpolate untrusted data into it.

Sources and browser support

MDN: slot describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.