Shadow DOM y Virtual DOM

Shadow DOM

La manipulación del DOM es algo de lo más utilizado en la Web. Shadow DOM nos permite incluir un subárbol en un documento, es decir, nos permite agregar un DOM encapsulado en el DOM principal de la página web.

Puede haber más de alguno que piense que el Shadow DOM es lo mismo que un iframe, pero no.  Shadow DOM es parte del documento y un iframe es un documento diferente al principal, es uno aparte.

Muchas páginas utilizan Shadow DOM para mostrar sus elementos, hay que tomar en cuenta que no todos los navegadores lo aceptan. Actualmente solo Chrome y Opera lo aceptan, tal y como se muestra la siguiente imagen.

Browser Support

Imagen de http://blog.codeando.org/

Un ejemplo claro es en elementos de video. Con la etiqueta <video> podemos incrustar un video en nuestra página web solo indicando la ruta del mismo utilizando el atributo “src”

Si ponemos esa etiqueta en documento HTML y lo abrimos con el navegador Chrome podemos ver algo como lo siguiente:

Etiqueta Video

Notemos que el video tiene un apartado de controles, con los cuales podemos reproducir o pausar el video, subir o bajar el volumen, etc. Estos controles no se diseñaron ni   se programaron, se agregan mediante el Shadow DOM.

Si vemos el inspeccionador de elementos ponemos ver que solo está la etiqueta que mencionamos anteriormente.

Etiqueta Video sin Shadow DOM

Mas sin embargo habilitamos la opción “Show user agent shadow DOM” del DevTools podemos ver todos los elementos que lo componen.

Etiqueta Video con Shadow DOM

Ahora bien, ¿Cómo se hace el Shadow DOM?

Para responder la pregunta vamos a poner un ejemplo. Para esto usaremos una página sencilla.

Esta página solo nos muestra un div con la frase “Hola soy el div Principal”, se vería algo así:

Ejemplo Shadow DOM

Y podemos ver que en el inspeccionador solo nos aparece el div.

Ejemplo Shadow DOM codigo

Para utilizar el Shadow DOM creamos un script con el siguiente código y lo agregamos a la página que usamos anteriormente.

Primero vemos que la página tiene un elemento con el identificador “Principal” para poder referirnos a ese elemento.

Luego debemos de tener acceso a ese elemento mediante JavaScript:

Después, debemos de crear la raíz que va a tener encapsulado todos los elementos que vamos a usar con Shadow DOM, a esta raíz se le conoce como “Shadow Root”, para hacerlo es con la siguiente instrucción:

Por ultimo debemos de agregar los controles, para hacerlo podemos editar la propiedad innerHTML:

Una vez guardado el archivo con el scrpit incluido podemos ver que la pagina queda como se muestra a continuación:

Resultado Shadow DOM

Y si vemos el inspeccionador podemos ver las modificaciones que tiene el Shadow DOM

Resultado Shadow DOM código

Virtual DOM

Es una forma de manipulación del DOM que para usarla debemos de tener ReactJS. Lo que hace es que en lugar de renderizar todo el DOM, hace una copia en memoria de los cambios y después realiza un algoritmo para comparar las propiedades de la copia que tiene e en memoria con los que cuenta la versión del DOM, así solo aplica los cambios a las partes que varían.

Tal vez el proceso se oye complicado, pero no lo es, todo el trabajo se lo lleva ReactJS. Para entenderlo mejor más vamos a ver el siguiente ejemplo:

Teniendo la misma página que en la parte de Shadow DOM:

Ejemplo Shadow DOMY en el inspeccionador solo nos aparece el div.

Ejemplo Shadow DOM codigo

Ahora para poder utilizar ReactJS hay que referenciarlo, ya que es una librería para JavaScritpt. Para eso usamos los siguientes links:

O bien descargar los archivos necesarios.

Para manipular el DOM creamos un script como el siguiente:

Primero debemos de crear un elemento, eligiendo la etiqueta, sus atributos y el texto a mostrar u otro elemento que sería el hijo inmediato.

Después debemos renderizar el DOM con los cambios o elementos a agregar y desde donde se va a agregar.

Al final nuestra página quedaría de la siguiente manera.

Resultado Virtual DOM

Los ejemplos los puedes descargar del repositorio de github siguiente:

Virtual/Shadow DOM

About BetoSuarez

Técnico Profesional en Informática y estudiante de la Licenciatura en Ingeniería en Computación.