Elementos HTML

Web Components

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Crea elementos personalizados: una plantilla que se analiza pero no se muestra y un slot que muestra el contenido de la página dentro de un árbol shadow.

`<slot>`

MDN

Un hueco en el árbol shadow de un componente web que la página rellena con su propio marcado. Un slot con nombre solo recibe los elementos cuyo atributo slot coincide con ese nombre.

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 no añade estilos: slot no tiene caja propia y el contenido que recibe conserva sus estilos. El elemento personalizado necesita unas pocas líneas de script. Los tokens de diseño atraviesan el límite del shadow, así que la tarjeta sigue el modo de color.

`<template>`

MDN

Marcado que el navegador lee pero no muestra, listo para copiarlo en la página mediante un 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 no añade estilos: nunca se representa. Las copias que el script inserta en la página adoptan los estilos de esta.