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

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

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

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

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

   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.

   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.