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.
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”
|
1 |
<video src="1.Mp4" controls width='500px' height='500px'></video> |
Si ponemos esa etiqueta en documento HTML y lo abrimos con el navegador Chrome podemos ver algo como lo siguiente:
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.
Mas sin embargo habilitamos la opción “Show user agent shadow DOM” del DevTools podemos ver todos los elementos que lo componen.
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.
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>Test</title> </head> <body> <div id="Principal">Hola soy el div Principal</div> </body> </html> |
Esta página solo nos muestra un div con la frase “Hola soy el div Principal”, se vería algo así:
Y podemos ver que en el inspeccionador solo nos aparece el div.
Para utilizar el Shadow DOM creamos un script con el siguiente código y lo agregamos a la página que usamos anteriormente.
|
1 2 3 4 5 |
<script type="text/javascript"> var Principal = document.querySelector('#Principal'); var root = Principal.createShadowRoot(); root.innerHTML='<p>Ahora yo estoy en el div Principal</p>'; </script> |
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:
|
1 |
var Principal = document.querySelector('#Principal'); |
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:
|
1 |
var root = Principal.createShadowRoot(); |
Por ultimo debemos de agregar los controles, para hacerlo podemos editar la propiedad innerHTML:
|
1 |
root.innerHTML='<p>Ahora yo estoy en el div Principal</p>'; |
Una vez guardado el archivo con el scrpit incluido podemos ver que la pagina queda como se muestra a continuación:
Y si vemos el inspeccionador podemos ver las modificaciones que tiene el Shadow DOM
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:
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>Test</title> </head> <body> <div id="Principal">Hola soy el div Principal</div> </body> </html> |
Y en el inspeccionador solo nos aparece el div.
Ahora para poder utilizar ReactJS hay que referenciarlo, ya que es una librería para JavaScritpt. Para eso usamos los siguientes links:
|
1 2 |
<script src="https://fb.me/react-0.14.8.min.js"></script> <script src="https://fb.me/react-dom-0.14.8.min.js"></script> |
O bien descargar los archivos necesarios.
Para manipular el DOM creamos un script como el siguiente:
|
1 2 3 4 |
<script type="text/javascript"> var root = React.createElement('p', null, 'Ahora yo en el principal'); ReactDOM.render(root, document.getElementById('Principal')); </script> |
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.
|
1 |
var root = React.createElement('p', null, 'Ahora yo en el principal'); |
Después debemos renderizar el DOM con los cambios o elementos a agregar y desde donde se va a agregar.
|
1 |
ReactDOM.render(root, document.getElementById('Principal')); |
Al final nuestra página quedaría de la siguiente manera.
Los ejemplos los puedes descargar del repositorio de github siguiente:
