Web Components: Custom Elements, template, slot y Shadow DOM

Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.

Web Components te permiten crear etiquetas propias que viven bien en cualquier stack.

Custom Elements definen comportamiento; template y slot definen estructura reusable.

Shadow DOM encapsula estilos y evita colisiones con el CSS global.

Con una API bien diseñada, tus componentes son más mantenibles que una mezcla de HTML suelto.

  • Cuando entiendes estas piezas, el resto fluye. 🧱
  • Diseña primero la API del HTML, luego el JS.
  • Un buen componente expone una interfaz simple: atributos de entrada, slots para contenido y eventos si hace falta interacción.
  • Evita lógica excesiva dentro del componente. Si hace de todo, termina siendo un mini-framework difícil de mantener.
  • Úsalo cuando necesites encapsulación real, no por moda.

Las 4 piezas que necesitas dominar

Cuando entiendes estas piezas, el resto fluye. 🧱

Flujo real de un componente nativo

Diseña primero la API del HTML, luego el JS.

Un buen componente expone una interfaz simple: atributos de entrada, slots para contenido y eventos si hace falta interacción.

Evita lógica excesiva dentro del componente. Si hace de todo, termina siendo un mini-framework difícil de mantener.

Shadow DOM con criterio

Úsalo cuando necesites encapsulación real, no por moda.

Si tu componente se usará en distintos contextos con CSS impredecible, Shadow DOM evita conflictos de estilos.

Si necesitas heredar estilos globales de forma abierta, quizá no conviene encapsular tanto. Evalúa caso por caso.

HTML
22

Web Components: Custom Elements, template, slot y Shadow DOM

Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.

Código del tema: customElements.define | <template> | <slot> | attachShadow

📘 Teoría

Las 4 piezas que necesitas dominar

Cuando entiendes estas piezas, el resto fluye. 🧱

1

Custom Element

Registra tu etiqueta con `customElements.define`.

2

template

Define markup reusable sin render inmediato.

3

slot

Permite insertar contenido externo en huecos concretos.

4

Shadow DOM

Aísla estilos y estructura del documento principal.

Flujo real de un componente nativo

Diseña primero la API del HTML, luego el JS.

1

Un buen componente expone una interfaz simple: atributos de entrada, slots para contenido y eventos si hace falta interacción.

2

Evita lógica excesiva dentro del componente. Si hace de todo, termina siendo un mini-framework difícil de mantener.

Registro básico de componente
class CourseCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <article class="course-card">
        <h3>${this.getAttribute('title') || 'Curso sin título'}</h3>
        <p><slot></slot></p>
      </article>
    `;
  }
}

customElements.define('course-card', CourseCard);

Shadow DOM con criterio

Úsalo cuando necesites encapsulación real, no por moda.

1

Si tu componente se usará en distintos contextos con CSS impredecible, Shadow DOM evita conflictos de estilos.

2

Si necesitas heredar estilos globales de forma abierta, quizá no conviene encapsular tanto. Evalúa caso por caso.

Componente con shadow root
class BadgeInfo extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `
      <style>
        .badge { background: #0f172a; color: #fff; padding: 4px 10px; border-radius: 999px; }
      </style>
      <span class="badge"><slot>Info</slot></span>
    `;
  }
}

customElements.define('badge-info', BadgeInfo);

🧪 Aprende probando

Ejemplo Ejemplo guiado: tarjeta con slot Componente simple con contenido proyectado.

🏁 Retos

Reto Reto: registra correctamente el custom element Completa el registro con nombre válido (con guion).

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .