Isso é só o começo. Das mentes de Mark Millar e Olivier Coipel, The Magic Order é a Primeira Série de Quadrinhos da Netflix. A 1 Edição cheg

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.
DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.
Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.
O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.
Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:
Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.
E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.
Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.