O que é shadow DOM?

O shadow DOM, ou shadow tree, é uma árvore de nós HTML assim como qualquer outra árvore que já conhecemos (a light tree), mas que é anexada a um elemento específico da light tree, não ao documento em si. Ou seja, é criado um novo contexto de nós em que todos os nós pertencentes à shadow tree não interagem diretamente com os nós do documento.

Esta regra é válida também para o CSS (aparentemente o JavaScript não é encapsulado), ou seja, você pode definir regras no CSS utilizando ids e classes normalmente, que tais regras se aplicarão apenas ao contexto da shadow tree e não se aplicarão ao documento em si.

O Shadow DOM é um excelente recurso

No Shadow Dom o browser cria uma sub-árvore protegida que não herda os estilos (CSS) da árvore pai. Ou seja, é criado uma camada de proteção no componente e ainda implica em um ganho de performance adicional pelo fato do navegador não precisar fazer “repaint” da página toda sempre que aquela área da tela (ShadowDOM) onde o componente foi montado sofrer alguma mudança.

O Shadow DOM é a mesma coisa que o Virtual DOM?

Não, eles são diferentes. O Shadow DOM é uma tecnologia do navegador desenhada principalmente para conter variáveis e CSS no escopo dos web components. O virtual DOM é um conceito implementado por bibliotecas em JavaScript em cima das APIs do navegador.