JavaScript Academy · Lección

Shadow DOM y encapsulación

Aísle estilos y marcado en raíces shadow.

Shadow DOM y encapsulación es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es el Shadow DOM?

Shadow DOM proporciona a un elemento un árbol DOM privado y encapsulado. El marcado y los estilos que contiene están aislados del resto de la página.

El CSS externo no se filtra hacia dentro.
El CSS interno no se filtra hacia fuera.
La estructura interna está oculta para las consultas DOM normales.

attachShadow

Puede crear un árbol de sombra llamando a this.attachShadow({ mode: 'open' }). Esto devuelve una raíz de sombra que puede rellenar como un nodo normal.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Modo open frente a closed

La opción mode controla el acceso desde el exterior:

'open' — se puede acceder a la raíz mediante element.shadowRoot.
'closed' — element.shadowRoot devuelve null; solo su código conserva la referencia.

La mayoría de los componentes usa 'open' para facilitar la depuración.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Rellenar la raíz de sombra

Establezca shadowRoot.innerHTML para crear el contenido encapsulado. Este marcado no es visible para document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Estilos con ámbito

Una etiqueta style dentro de la raíz de sombra solo afecta a esa raíz. El mismo selector fuera del componente no se ve afectado, y los estilos de la página no se filtran hacia dentro.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

El selector :host

Dentro de los estilos de sombra, :host selecciona el propio elemento personalizado, que es el host del árbol de sombra. Úselo para aplicar estilos a la caja exterior del componente.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Aislamiento de estilos en acción

El encapsulamiento hace que los autores de componentes y de páginas dejen de competir por los nombres de clase. Una regla .title dentro de un componente nunca afecta a otra .title en otro lugar.

No hay conflictos con el CSS global.
Los selectores sencillos y genéricos vuelven a ser seguros.

Consultar dentro de la raíz de sombra

Para acceder a los nodos internos, consulte la raíz de sombra, no el documento. La raíz de sombra admite los mismos métodos de consulta.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Los eventos atraviesan el límite

Muchos eventos, como click, salen del Shadow DOM mediante bubbling, pero se redirigen para que los escuchadores externos vean el elemento host, no el nodo interno. Esto preserva el encapsulamiento.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Estilos heredables

Algunas propiedades CSS, como color y font-family, se heredan a través del límite de sombra porque la herencia fluye por el árbol compuesto. Puede adoptar el aspecto de la página basándose en la herencia o utilizando propiedades personalizadas de CSS.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Cuándo usar Shadow DOM

Use Shadow DOM cuando necesite un aislamiento sólido de estilos y marcado para un widget reutilizable. Omítalo cuando quiera que el componente herede los estilos globales de la página y participe libremente en ellos.

Comprobación rápida

Compruebe si entiende Shadow DOM.

Resumen

Ha aprendido sobre Shadow DOM:

attachShadow({ mode }) crea un árbol aislado.
'open' expone shadowRoot; 'closed' lo oculta.
Las etiquetas internas style tienen un ámbito limitado; :host aplica estilos al propio elemento.
Las consultas se ejecutan sobre la raíz de sombra, no sobre el documento.
Los eventos se redirigen para preservar el encapsulamiento.

A continuación, reutilizaremos el marcado con templates y slots.

Preguntas frecuentes

¿La lección «Shadow DOM y encapsulación» es gratis?

Sí — el texto completo de «Shadow DOM y encapsulación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Shadow DOM y encapsulación»?

Aísle estilos y marcado en raíces shadow. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Shadow DOM y encapsulación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy