Quais são as diferenças entre shadow DOM, virtual DOM e DOM normal?

Shadow DOM:

• encapsulamento: Cria uma árvore DOM separada e isolada dentro do documento principal. Os estilos e scripts dentro do Shadow DOM por padrão não afetam o documento principal e vice-versa.
• scoping: Ideal para criar componentes reutilizáveis e independentes (por exemplo, componentes web).
• rendering: O navegador renderiza o Shadow DOM diretamente.

Virtual DOM:

• abstração: É uma representação do DOM na forma de objetos JavaScript na memória.
• diffing e patching: Utilizado por frameworks (por exemplo, React) para otimizar as atualizações. Quando o estado muda, o framework constrói uma nova versão do Virtual DOM, compara-a com a anterior (diffing) e aplica apenas as mudanças necessárias ao DOM real (patching).
• desempenho: Melhora o desempenho em atualizações frequentes do DOM, minimizando a interação direta com a API do navegador.
• não é uma funcionalidade do navegador: É um conceito implementado ao nível de JavaScript, não uma função nativa do navegador.

DOM tradicional (Document Object Model):

• representação: Representa uma árvore de nós (elementos, atributos, texto), correspondente à estrutura do documento HTML.
• API: Fornece uma API para acessar e manipular a estrutura e conteúdo do documento.
• rendering: O navegador renderiza o DOM real.
• manipulação direta: As mudanças são feitas diretamente no DOM real, o que pode ser lento com muitas atualizações.

Tabela resumo:

Característica	Shadow DOM	Virtual DOM	DOM tradicional
Propósito	Encapsulamento de componentes	Otimização de atualizações do DOM	Representação da estrutura HTML
Natureza	Funcionalidade nativa do navegador	Conceito implementado em JS	Estrutura nativa do navegador
Isolamento	Sim, a nível de DOM e CSS	Não, é apenas uma representação	Não
Interação	Interação direta do navegador	Diffing/patching primeiro, depois DOM	Interação direta do navegador
Uso	Componentes web	Frameworks (React, Vue, etc.)	API web básica