¿Qué es Shadow DOM?

Shadow DOM — es un estándar web que permite encapsular el árbol DOM y los estilos dentro de un componente, aislándolos del resto del documento.

Conceptos principales:

• Shadow tree: Árbol DOM propio, adjunto a un elemento.
• Shadow boundary: Frontera que separa el Shadow DOM del documento principal.
• Shadow host: Elemento al que se adjunta el Shadow DOM.
• Shadow root: Nodo raíz del Shadow tree.

Ventajas:

• Aislamiento de estilos: Los estilos definidos dentro del Shadow DOM no afectan a los elementos fuera de él, y viceversa.
• Aislamiento del DOM: La estructura DOM dentro del Shadow DOM no es visible ni accesible directamente desde el documento principal, lo que previene conflictos de id y clases.
• Encapsulación: Crea componentes modulares y reutilizables.

Creación del Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' - accesible desde JavaScript; 'closed' - no

shadowRoot.innerHTML = `
  <style>
    /* Estilos solo para este Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Este es el contenido del Shadow DOM</p>
`;