Qual é a diferença entre Shadow DOM, Virtual DOM e DOM normal?

Shadow DOM encapsula a estrutura e o estilo de um elemento, criando uma árvore isolada dentro do DOM principal. Isto previne fugas de estilos e lógica, permitindo criar componentes reutilizáveis.

Virtual DOM é uma representação leve do DOM na memória. Em vez de manipular diretamente o DOM real, as alterações são primeiro aplicadas ao Virtual DOM. Depois, um algoritmo compara a árvore virtual antiga e a nova (diffing) e atualiza apenas as partes do DOM real que mudaram (patching). Isto minimiza operações dispendiosas no DOM real, melhorando o desempenho em atualizações frequentes.

DOM normal (Document Object Model) é uma API para interagir com documentos HTML. Representa a estrutura do documento como uma árvore de nós, permitindo aos programas aceder e modificar conteúdo, estrutura e estilo do documento. Manipulações diretas do DOM podem ser ineficientes em mudanças massivas.

Característica	Shadow DOM	Virtual DOM	DOM normal
Propósito	Encapsulamento de estrutura e estilos	Otimização de atualizações	API para trabalhar com documentos HTML
Representa	Árvore aninhada de nós dentro do elemento	Representação leve do DOM na memória	Árvore de nós do documento HTML real
Mecanismo	Criação de um subárvore isolado	Diffing (comparação) e patching (atualização)	Manipulação direta de nós
Principais benefícios	Isolamento, reutilização de componentes	Desempenho em atualizações frequentes	Método padrão de interação com o documento
Usado em	Web Components	React, Vue.js, Inferno, etc.	Navegadores, API JavaScript