¿Qué es Shadow DOM?

Shadow DOM es un estándar web que permite encapsular HTML, CSS y JavaScript en bloques separados e aislados del documento principal.

Conceptos principales:

• Shadow Host: Elemento DOM al que se le aplica Shadow DOM.
• Shadow Tree: Árbol DOM aislado.
• Shadow Boundary: Frontera entre Shadow DOM y el documento principal.
• Shadow Root: Nodo raíz del Shadow Tree. Se crea con element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root accesible desde fuera a través de element.shadowRoot.
  • closed: Shadow Root no accesible desde fuera.

Ventajas:

• Encapsulación de estilos: Los estilos definidos en Shadow DOM no se filtran hacia afuera y no afectan al documento principal. Los estilos del documento principal por defecto no afectan al Shadow DOM, pero esto se puede controlar.
• Encapsulación del DOM: Los elementos dentro del Shadow DOM no son visibles en el árbol DOM principal, lo que previene intersecciones accidentales de selectores y manipulaciones.
• Encapsulación del comportamiento: La lógica y los manejadores de eventos pueden estar aislados en Shadow DOM.

Ejemplo de creación de Shadow DOM:

// Crear un nuevo elemento DIV
const hostElement = document.createElement('div');
// Adjuntar Shadow DOM al elemento
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Agregar contenido al Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Estilo aplicable solo dentro de este Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Este es un texto dentro del Shadow DOM</p>
`;

// Agregar el elemento host al documento principal
document.body.appendChild(hostElement);

Aplicaciones:

• Creación de componentes web reutilizables.
• Aislamiento de estilos de bibliotecas externas.
• Protección de detalles internos del componente contra interferencias externas.

Características al trabajar con estilos:

• Los estilos externos por defecto no afectan al Shadow DOM.
• Se puede usar :host para estilizar el Shadow Host desde dentro del Shadow DOM.
• Se puede usar :host-context() para estilizar en función del contexto del Shadow Host.
• Se puede usar ::slotted() para estilizar elementos colocados en slots (<slot>).

<my-component>
  <!-- Este elemento será "enviado" al slot dentro del Shadow DOM -->
  <span>Contenido del slot</span>
</my-component>

// Dentro del Shadow DOM del componente my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Estilo para el elemento colocado en el slot con nombre "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Contenido principal del componente</div>
  <slot></slot> <!-- Aquí se mostrará el contenido del slot -->
`;

Shadow DOM es parte de la especificación de Web Components.