¿Cuál es la diferencia entre ShadowDOM y VirtualDOM?

El modelo de objeto de documento (DOM) es un concepto popular seguido en el desarrollo del lado del cliente. Es una técnica fundamental que es a la vez multiplataforma e independiente del lenguaje. Se define como una API para documentos HTML o XML que crea un documento estructurado lógicamente a través de objetos.

DOM virtuales:

• El DOM virtual, en términos simples, no es más que la representación completa y completa de un DOM real.
• Dado que cualquier cambio en el DOM hace que la página se vuelva a renderizar la mayoría de las veces, Virtual DOM intenta principalmente evitar cambios innecesarios y costosos en el DOM.
• Esto se logra agrupando los cambios y haciendo una sola renderización en lugar de varias pequeñas.
• Una copia del DOM se guarda en la memoria y se usa para comparar los cambios que se realizan en cualquier parte del DOM, se compara para encontrar diferencias. Por lo tanto, solo se vuelven a renderizar aquellas partes de la aplicación que se actualizan en lugar de volver a renderizar todo el DOM.
• VueJS y ReactJS usan Virtual DOM.

Sombra DOM:

• Shadow DOM, por otro lado, se relaciona principalmente con el concepto de encapsulación. Es una herramienta que permite a los desarrolladores superar la encapsulación DOM.
• Se refiere al potencial del navegador para agregar un subárbol de elementos DOM en la representación de un documento, pero no en el árbol DOM del documento principal.
• Por lo tanto, aísla el DOM y asegura que el DOM de un componente sea un elemento separado que no aparecerá en un DOM global.
• A diferencia del DOM, el Shadow DOM se presenta en partes más pequeñas, lo que implica que (a diferencia del Virtual DOM) no es una representación completa de todo el DOM.
• También se ha demostrado que es útil con el alcance de CSS. Los estilos utilizados en una aplicación pueden superponerse, lo que dificulta su manejo. Shadow DOM garantiza que los estilos creados dentro de un solo elemento Shadow DOM permanezcan aislados y dentro de su propio alcance.

Diferencias entre ShadowDOM y VirtualDOM

DOM virtuales	Sombra DOM
Gira en torno a la resolución de problemas de rendimiento.	Gira en torno al concepto de encapsulación.
Es una representación completa de un DOM real.	No es una representación completa de todo el DOM.
Agrupa varios cambios y realiza un solo renderizado en lugar de muchos pequeños.	Agrega un subárbol de elementos DOM en la representación de un documento, en lugar de agregarlo al árbol DOM del documento principal.
Crea una copia de todo el objeto DOM.	Crea pequeñas piezas del objeto DOM que tienen su propio alcance aislado.
No aísla el DOM.	Aísla el DOM.
No ayuda con el alcance de CSS.	Ayuda con el alcance de CSS.