¿Cuáles son las diferencias entre shadow DOM, virtual DOM y DOM normal?

Shadow DOM:

• encapsulación: Crea un árbol DOM separado y aislado dentro del documento principal. Los estilos y scripts dentro del Shadow DOM por defecto no afectan al documento principal y viceversa.
• alcance: Ideal para crear componentes reutilizables e independientes (por ejemplo, componentes web).
• renderizado: El navegador renderiza el Shadow DOM directamente.

Virtual DOM:

• abstracción: Es una representación del DOM en forma de objetos JavaScript en memoria.
• diffing y patching: Utilizado por frameworks (por ejemplo, React) para optimizar las actualizaciones. Cuando cambia el estado, el framework construye una nueva versión del Virtual DOM, la compara con la anterior (diffing) y aplica solo los cambios necesarios al DOM real (patching).
• rendimiento: Mejora el rendimiento en actualizaciones frecuentes del DOM, minimizando la interacción directa con la API del navegador.
• no es una característica del navegador: Es una concepto implementado a nivel de JavaScript, no una función nativa del navegador.

DOM tradicional (Document Object Model):

• representación: Representa un árbol de nodos (elementos, atributos, texto), correspondiente a la estructura del documento HTML.
• API: Proporciona una API para acceder y manipular la estructura y contenido del documento.
• renderizado: El navegador renderiza el DOM real.
• manipulación directa: Los cambios se realizan directamente en el DOM real, lo que puede ser lento con muchas actualizaciones.

Tabla resumen:

Característica	Shadow DOM	Virtual DOM	DOM tradicional
Propósito	Encapsulación de componentes	Optimización de actualizaciones del DOM	Representación de la estructura HTML
Naturaleza	Funcionalidad nativa del navegador	Concepto implementado en JS	Estructura nativa del navegador
Aislamiento	Sí, a nivel de DOM y CSS	No, es solo una representación	No
Interacción	Interacción directa del navegador	Diffing/patching primero, luego DOM	Interacción directa del navegador
Uso	Componentes web	Frameworks (React, Vue, etc.)	API web básica