Shadow DOM != Virtual DOM
DOM ou Document Object Model é o conceito bem conhecido para todos nós. Alguns gostam, mas a maioria das pessoas tem dor de cabeça com ele. John Resig certa vez disse que o DOM é uma bagunça. Quer dizer, essa conversa já é antiga e muitas questões que foram controvérsias agora fazem parte do passado. Porque a questão mais importante não era o DOM propriamente dito, mas o conjunto de ferramentas que nos ajudaram a trabalhar com ele (elas realmente fizeram a nossa vida difícil).
Já é 2017 e posso dizer agora que o conjunto de ferramentas atualmente disponível para acessar e manipular o DOM é bastante impressionante (especialmente se você, como eu, começou quando document.getElementById era única coisa possível).
O que permanece no trabalho de manipulação do DOM é que ainda é um processo custoso para o browser. Mais precisamente os re-renders que podem e vão atingir fortemente seus recursos de hardware. O que inevitavelmente irá colocar o desempenho de seus apps em perigo.
DOM Virtual
O DOM virtual é uma representação completa do DOM real. Sua característica mais importante é de fato o agrupamento de mudanças e fazendo um único re-render em vez de muitos outros menores.
Assim, em suma, podemos dizer que o DOM Virtual está resolvendo questões relacionadas com performance. (Eu não vou entrar em detalhes sobre como funciona o DOM virtual. Para este artigo, já é suficiente saber o porque dele existir).
Shadow DOM
Shadow DOM é como um indivíduo introvertido que seguramente se protege da influência de seu entorno e não está interessado, nem se preocupa em mudar o mundo exterior.
Pergunte a si mesmo, qual é o principal problema de interface do usuário frameworks como React ou VueJS se propõe a resolver?
Encapsulamento
CSS é difícil. Se você acopla seus estilos ao tentar reutilizá-los em várias combinações torna-se ainda mais difícil. Inevitavelmente, isso resulta em erros de regressão de UI, manutenção rígida e escalabilidade ruim.
Ainda assim eu acredito que o problema principal não é o CSS, mas a maneira que nós o usamos.
Shadow DOM é uma ferramenta que nos ajuda a superar encapsulamento DOM no nível nativo. Não é apenas sobre CSS, é sobre os elementos também.
Em oposição ao DOM regular, o Shadow DOM vêm em pedaços menores. Isso significa que não é uma representação completa do DOM da página. Em vez disso você pode olhar para ele como peças de Lego que formam o DOM real. Do qual cada peça é um DOM particular.
Então, Shadow DOM é tudo sobre encapsulamento, e pronto.
Conforme a MDN e W3C, a especificação Shadow DOM está atualmente em desenvolvimento. Por isso, o suporte dos navegadores não é muito grande… e provavelmente a implementação atual mudará. Mas o conceito central deve permanecer o mesmo.
Conclusão
Espero que agora esteja claro qual é o problema que o Shadow DOM tenta resolver e como ele difere do DOM virtual.
No futuro próximo, será muito importante conhecer a maneira nativa de lidar com encapsulamento e componentes no nível do navegador. Quando esse dia chegar, muitos recursos que foram personalizados, construídos em cada estrutura, será obsoleto. Já que é sempre melhor usar a implementação nativa do que um polyfill ou coisa parecida…
Comece a brincar com o Shadow DOM hoje, é sempre hora de aprender algo novo.
