¿Qué es Shadow DOM?

Shadow DOM es un estándar web que permite encapsular el DOM y CSS dentro de un componente. Crea un árbol DOM separado e aislado, llamado "árbol de sombra" (shadow tree), que se adjunta a un elemento en el documento principal, llamado "raíz de sombra" (shadow root).

Ventajas del Shadow DOM:

• Aislamiento de CSS: Los estilos definidos dentro del Shadow DOM no "escapan" al exterior, afectando al documento principal, y por defecto, los estilos del documento principal no afectan al Shadow DOM.
• Aislamiento del DOM: La estructura del Shadow DOM está oculta del documento principal y no es accesible mediante métodos estándar de selección (por ejemplo, querySelector).
• Aislamiento de JavaScript: Los scripts que se ejecutan en el documento principal no pueden acceder fácilmente a los elementos dentro del Shadow DOM.
• Reutilización: Los componentes creados con Shadow DOM pueden ser fácilmente utilizados en otras partes de la aplicación o incluso en otros sitios web.

Creación del Shadow DOM:

// Obtenemos el elemento al que queremos adjuntar el Shadow DOM
const hostElement = document.getElementById('my-component');

// Creamos Shadow Root
// 'open' hace que el Shadow DOM sea accesible desde fuera a través de hostElement.shadowRoot
// 'closed' oculta el Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Añadimos elementos dentro del Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Estilos específicos para este componente */
    h2 {
      color: blue;
    }
  </style>
  <h2>Encabezado dentro del componente</h2>
  <p>Párrafo dentro del componente.</p>
`;

Características:

• Slots: Permiten insertar contenido externo en lugares específicos dentro del Shadow DOM.
• Partes de sombra (Shadow Parts): Permiten estilizar ciertos elementos dentro del Shadow DOM desde el exterior.

El Shadow DOM es un componente clave para crear componentes web (Web Components), proporcionando una fuerte encapsulación necesaria para crear elementos de UI reutilizables y autosuficientes.