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

DOM (Document Object Model) é uma API para documentos HTML e XML. Representa uma árvore de nós, onde cada nó corresponde a um elemento, atributo ou fragmento de texto do documento. É utilizado para aceder e manipular a estrutura, estilos e conteúdo de páginas web. Manipulações diretas do DOM podem ser lentas devido à necessidade de recalcular estilos, layout e repintar.

Virtual DOM é um conceito utilizado em frameworks como React ou Vue. É uma representação da árvore DOM armazenada na memória. Quando os dados do componente mudam, o framework cria uma nova árvore Virtual DOM. Depois, compara-a com a árvore virtual anterior (diffing) e determina o conjunto mínimo de alterações a aplicar ao DOM real. Isto permite otimizar a atualização da página, minimizando operações dispendiosas com o DOM real.

Shadow DOM é um padrão web que permite encapsular a estrutura, estilos e comportamento de um componente. Cria uma árvore DOM "sombra" oculta, ligada a um elemento no DOM normal (elemento hospedeiro). O conteúdo do Shadow DOM está isolado do resto do documento: os estilos dentro dele não afetam o mundo exterior, e vice-versa. Isto é útil para criar componentes reutilizáveis e isolados, como <video> ou <input type="range">.

Principais diferenças:

Característica	DOM normal	Virtual DOM	Shadow DOM
Representação	Árvore real do documento API	Representação leve do DOM na memória	Subárvore DOM encapsulada
Propósito	API para aceder e modificar o documento	Otimização de atualizações do DOM	Encapsulação de componentes
Manipulações	Diretas	Indiretas (por comparação de versões)	Diretas, mas apenas dentro do "sombra"
Isolamento de estilos	Não	Não (a menos que use CSS-in-JS ou módulos)	Sim
Padrão	Parte da plataforma web	Conceito de frameworks	Parte da plataforma web