¿Cuál es la diferencia entre Shadow DOM, Virtual DOM y DOM normal?

DOM (Document Object Model) es una API para documentos HTML y XML. Representa un árbol de nodos, donde cada nodo corresponde a un elemento, atributo o fragmento de texto del documento. Se utiliza para acceder y manipular la estructura, estilos y contenido de las páginas web. Las manipulaciones directas del DOM pueden ser lentas debido a la necesidad de recalcular estilos, diseño y volver a pintar.

Virtual DOM es un concepto utilizado en frameworks como React o Vue. Es una representación del árbol DOM almacenada en memoria. Cuando los datos del componente cambian, el framework crea un nuevo árbol Virtual DOM. Luego lo compara con el árbol virtual anterior (diffing) y determina el conjunto mínimo de cambios que deben aplicarse al DOM real. Esto permite optimizar la actualización de la página, minimizando operaciones costosas con el DOM real.

Shadow DOM es un estándar web que permite encapsular la estructura, estilos y comportamiento de un componente. Crea un árbol DOM "sombra" oculto, conectado a un elemento en el DOM normal (elemento host). El contenido del Shadow DOM está aislado del resto del documento: los estilos dentro de él no afectan al mundo exterior, y viceversa. Esto es útil para crear componentes reutilizables e aislados, como <video> o <input type="range">.

Diferencias principales:

Característica	DOM normal	Virtual DOM	Shadow DOM
Representación	Árbol real del documento API	Representación ligera del DOM en memoria	Subárbol DOM encapsulado
Propósito	API para acceder y modificar el documento	Optimización de actualizaciones del DOM	Encapsulación de componentes
Manipulaciones	Directas	Indirectas (mediante comparación de versiones)	Directas, pero solo dentro del "sombra"
Aislamiento de estilos	No	No (a menos que se use CSS-in-JS o módulos)	Sí
Estándar	Parte de la plataforma web	Concepto de frameworks	Parte de la plataforma web