Shadow DOM y slots en HTML

El componente es dueño de su marcado; la página, del contenido que va adentro.

<info-card>
  <h3 slot="title">Ownership</h3>
  <p>Each value has one owner at a time.</p>
</info-card>
<template id="card-template">
  <article class="card">
    <slot name="title"></slot>
    <div class="body"><slot></slot></div>
  </article>
</template>

<script>
  customElements.define('info-card', class extends HTMLElement {
    connectedCallback() {
      const template = document.getElementById('card-template');
      this.attachShadow({ mode: 'open' })
        .append(template.content.cloneNode(true));
    }
  });
</script>

Cómo funciona

1. Una raíz shadow esconde lo interno del CSS y las consultas de la página.
2. <slot> es el hueco donde caen los hijos propios de la página.
3. Un slot con nombre toma los elementos cuyo atributo slot coincide.

Palabras clave y builtins usados aquí

• class
• const
• document
• extends
• this

El intento, en números

Líneas

20

Caracteres a escribir

489

Tokens

131

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 98 segundos.

Escribe este fragmento

Paso 3 de 3 en Plantillas y componentes; paso 7 de 13 en HTML interactivo.

← Anterior Siguiente →