¿Qué es el Shadow DOM?

Este artículo explica qué es el Shadow DOM.

YouTube Video

Entendiendo el Shadow DOM

El Shadow DOM es una poderosa característica del estándar de Web Components que permite la encapsulación de estilos y estructuras DOM dentro de los componentes. Esta característica evita la interferencia de estilos y scripts entre los componentes y el documento principal.

¿Qué es el Shadow DOM?

El Shadow DOM proporciona una forma de crear un árbol DOM limitado asociado con un elemento DOM regular. Este árbol en la sombra está aislado del documento general, donde los estilos y scripts externos no lo influyen, ni sus estilos y scripts internos se filtran.

Por ejemplo, si creas un componente de botón personalizado utilizando Shadow DOM, sus estilos no interferirán con otros elementos en la página. De manera similar, los elementos con el mismo nombre de clase no entrarán en conflicto.

Beneficios del Shadow DOM

1. Encapsulación: El Shadow DOM separa estilos y funcionalidades, evitando conflictos con estilos y scripts globales.

2. Reutilización: Los componentes construidos con Shadow DOM pueden reutilizarse en diferentes proyectos sin preocuparse por conflictos de estilos.

3. Mantenibilidad: La encapsulación permite que los componentes sean autónomos en cuanto a lógica y estilos, facilitando la depuración y el mantenimiento.

Creando el Shadow DOM

Para usar el Shadow DOM, necesitas adjuntar una raíz de sombra a un elemento HTML. Aquí tienes un ejemplo sencillo:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Explicación

1. Elemento Host: Un elemento DOM regular al cual se adjunta la raíz de sombra (en este caso #shadow-host).

2. Raíz de Sombra: La raíz del árbol sombra creada utilizando attachShadow.

3. Modo: En el modo open, el JavaScript externo puede acceder a la raíz de sombra a través de element.shadowRoot. Por otro lado, el modo closed no permite el acceso.

Estilos dentro del Shadow DOM

Shadow DOM tiene su propio ámbito de estilos. Los estilos definidos dentro del árbol sombra solo se aplican a los elementos de ese árbol. Aquí hay un ejemplo:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Incluso si hay estilos en conflicto en el documento principal, los párrafos dentro del árbol sombra permanecen sin cambios:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Los párrafos dentro del Shadow DOM permanecen verdes, mientras que los párrafos externos son rojos.

Eventos dentro del Shadow DOM

Los eventos dentro del Shadow DOM son similares a los eventos normales del DOM pero pueden comportarse de manera diferente en términos de propagación debido a la encapsulación. Los eventos que ocurren dentro del árbol sombra pueden propagarse al elemento host pero no se propagan directamente a todo el documento.

Aquí hay un ejemplo:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Cuando se hace clic en el botón, ambos listeners se activan, demostrando el comportamiento de la propagación de eventos.

Slots: Distribución de contenido del Light DOM

Los slots te permiten proyectar contenido desde el Light DOM al Shadow DOM. Aquí hay un ejemplo:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

En el documento principal, puedes hacer lo siguiente:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Los elementos slot dentro del Shadow DOM muestran el contenido del Light DOM con el atributo slot correspondiente.

Conclusión

Shadow DOM es una herramienta vital para construir componentes web robustos, reutilizables y mantenibles. Al encapsular estilos y funcionalidades, reduce el potencial de conflictos y simplifica la gestión de la base de código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video