HTML slots: assign light-DOM content and keep a fallback

Use it for a real task

A receipt card accepts a title from its parent page. The named slot falls back to a generic label only when the parent supplies no matching child. The default slot receives the summary paragraph. This separation is about content ownership: the page owns the record text, while the card owns its reusable frame. Duplicate slot names or missing assignments can place content in an unexpected position.

<receipt-card>
  <template shadowrootmode="open">
    <article>
      <header><slot name="title">Receipt details</slot></header>
      <slot>Record summary unavailable.</slot>
    </article>
  </template>
  <h2 slot="title">Receipt R-47</h2>
  <p>Review due before the next export batch.</p>
</receipt-card>

What the markup guarantees

The fallback does not verify that the record data is complete. A server still supplies the correct title and summary, and an enhanced component still needs accessible behavior if it adds controls.

Cost and limits

Slot distribution is browser work, not a network request. Complex component trees add styling and debugging cost; keep the light-DOM content meaningful when a component fails to upgrade.

Common Mistakes

• Do not confuse slot assignment with form submission.
• Do not expect fallback to appear when assigned content exists.
• Do not ship a card whose only useful text depends on a script.

Connected lessons

• HTML declarative shadow DOM: parse a component boundary from markup
• HTML custom elements: preserve useful text before upgrade
• HTML article and section: mark standalone content and named subdivisions

Related CSS decisions

• CSS ::slotted(): style only the assigned element