Web Components – HTML elements

`<slot>`

MDN

A gap in the shadow tree of a web component that the page fills with its own markup. A named slot takes only the elements whose slot attribute matches its name.

Hello from the light DOM This text fills the default slot.

HTML

<template id="d-slot-template">
  <style>
    article { padding: var(--luz-space-sm); border: 1px solid var(--luz-divider); }
    h4 { margin-bottom: var(--luz-space-2xs); }
  </style>
  <article>
    <h4><slot name="title">Untitled</slot></h4>
    <slot>No content.</slot>
  </article>
</template>

<demo-card>
  <span slot="title">Hello from the light DOM</span>
  This text fills the default slot.
</demo-card>

LUZ adds no style: a slot has no box of its own, and what fills it keeps its own styles. The custom element takes a few lines of script. Design tokens cross the shadow boundary, so the card follows the color mode.

`<template>`

MDN

Markup the browser reads but does not show, ready to be copied into the page with script.

HTML

<template id="d-template">
  <li>Item <span data-n></span></li>
</template>

<button class="luz-btn luz-btn--outline" type="button" id="d-template-add">Add an item</button>
<ul id="d-template-list"></ul>

LUZ adds no style: it is never rendered. The copies that script puts in the page take the page styles.