Cuando se establece el encapsulamiento de la vista ShadowDom, la aplicación utiliza la implementación nativa de Shadow DOM del navegador. Los elementos se encapsulan agregando un DOM oculto o «sombra» separado a cada elemento.
Cuando se usa el encapsulado de ShadowDom, nuestra aplicación se ve así:
Se adjunta un árbol de sombra DOM a cada componente, con la raíz de sombra adjunta al elemento componente. Mirando el primer.componente, el propio componente () es donde la raíz de sombra se adjunta y los elementos dentro del componente (,
,
) componen el árbol de sombra.
Esta es una captura de pantalla que muestra las herramientas de desarrollo en cromo cuando se utiliza el encapsulado de ShadowDom. Muestra el árbol de ShadowDom para first.component ().
Noten que a diferencia de la encapsulación emulada, no se han añadido atributos a los elementos o a las clases.
Otra diferencia con la encapsulación emulada es con respecto a los estilos globales, los que provienen de styles.scss. Fíjese en el encabezado «Mis componentes», que se encuentra en app.component.html y en los estilos del segundo párrafo del componente. Carecen de los estilos que se les aplicaron previamente a través de styles.scss. A diferencia del encabezado «Encapsulado CSS», que se encuentra en index.html que se mantuvo con estilo, los componentes han sido completamente aislados de los estilos globales.
Limitaciones
La encapsulación de ShadowDom tiene algunas limitaciones que hay que tener en cuenta. No todos los navegadores tienen Shadow DOM completamente implementado. Según caniuse.com, Chrome es el único gran navegador web, junto con un par de navegadores móviles, que tiene tanto Shadow DOM v1 como v2 totalmente implementado. Al probar en Safari, la aplicación parecía funcionar, sin embargo, no se cargaba en Firefox. Debido al limitado soporte, actualmente se recomienda Emulated sobre el uso de la encapsulación de ShadowDom.