htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Shadow DOM, una forma fácil de entenderlo

Shadow DOM, una forma fácil de entenderlo

Shadow DOM es una de esas cosas que venimos escuchando en el mundo del desarrollo web, pero que no todos tienen claro lo que es y para qué sirve. En este post intentamos explicarlo.

Shadow DOM refiere a la habilidad de un navegador de incluir un subárbol de elementos en un documento, pero no así en el árbol DOM de este documento.

Otra forma (más simple) de explicarlo con palabras: el Shadow DOM es un DOM encapsulado que vive dentro del DOM principal. Al leer esto, algunos estarán pensando que es lo mismo que un iframe, pero la diferencia está en que: el Shadow DOM es parte del documento, no un documento diferente.

Lo más interesante de Shadow DOM es que los propios desarrolladores de navegadores lo usan para definir componentes complejos del DOM (audio, video, etc) y ahora esto está liberado para que los desarrolladores de sitios lo usemos. A continuación vamos a ver a que me refiero con esto.

Shadow DOM en Chrome

La forma más fácil de entender qué es el Shadow DOM es, como comentaba más arriba, ver como lo están utilizando los que desarrollan los navegadores.
En el caso de Chrome, esto es muy fácil de ver:

  1. Primero tenemos que ir a algún sitio donde haya un elemento video, audio, range, etc. En mi caso elegí un video.

  2. Si inspeccionamos el elemento, veremos que el código es el simple de un video con el elemento source dentro como muestra la siguiente imagen:

    Código del elemento video sin Shadow DOM

    Código del elemento video sin Shadow DOM

  3. Para poder ver el Shadow DOM, debemos activar la opción en la Configuración de las Herramientas de Desarrollador (Chrome Developer Tools):

    Activación de Shadow DOM en Chrome

    Activación de Shadow DOM en Chrome

  4. Ahora inspeccionamos nuevamente el elemento video y nos encontramos que, además de source, aparece el Shadow DOM:

    Shadow DOM dentro de elemento video

    Shadow DOM dentro de elemento video

  5. Al expandir Shadow DOM, vemos el sub-árbol que conforma el elemento video. Inspeccionando cada uno de sus elementos, podemos ver que son elementos comunes como divs:

    Sub-árbol de video

    Sub-árbol de video

    Y elementos complejos que a su vez tienen su propio Shadow DOM (por ejemplo el input range):

    Shadow DOM de input de tipo range dentro del sub-árbol de video.

    Shadow DOM de input de tipo range dentro del sub-árbol de video.

    Cada uno tiene un estilo adjudicado y que no se ve afectado por el estilo del documento principal. Esto es el encapsulamiento que nombraba anteriormente.

Conclusión

El Shadow DOM nos permite definir elementos complejos para poder reutilizarlos. Su característica, de ser un DOM encapsulado que coexiste dentro del DOM padre, nos brinda un forma de tener código aislado del resto tanto en estilos como en funcionalidad.

Hay mucho más para hablar de esta característica de HTML5, pero el principal objetivo de este post era entenderlo de una forma fácil. Más adelante habrá más contenido al respecto y a los web components en general.

Comparte conocimiento:
Tweet about this on Twitter0Share on LinkedIn7Share on Facebook3Share on Google+0
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

4 comentarios para “Shadow DOM, una forma fácil de entenderlo”

  1. Juan dice:

    ¡Excelente!

  2. Javier Sánchez dice:

    Muy bien explicado, por fin lo entiendo.

    Saludos!

  3. David Albarracín dice:

    Muchas gracias, me estaba volviendo loco el tema. Suerte.

  4. St4rk dice:

    Bien lo he entendido desde hace ya un tiempo lo que quiero saber es si puedo ser libre de modificar el estilo por defecto porque intente hacer una nueva interfaz para el reproductor de video con javascript y aun me duele la cabeza si alguien me puede decir donde encontrar material para esturdiar como trabajar con eso este es mi correo dayron.alfaro@art.jovenclub.cu

Dejar un comentario