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.
Veja o exemplo abaixo. É criado uma shadow tree a partir do elemento template e anexado ao elemento #nameTag. Perceba que as definições de estilo da shadow tree não se aplicam aos elementos externos, presentes na light tree.
A classe .outer é definida tanto para um elemento na light tree quanto um elemento na shadow tree, porém, devido o encapsulamento das definições de estilo, apenas o elemento da shadow tree é estilizado.
var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
<div class="outer">Stack Overflow em Português</div>
<div id="nameTag">Bob</div>
<template id="nameTagTemplate">
<style>
.outer { border: 2px solid brown; }
</style>
<div class="outer">
<span class="boilerplate">
Olá! Meu nome é
</span>
<span class="name">
Bob
</span>
</div>
</template>
O conceito de shadow DOM faz parte dos quatro padrões de Web Component, junto com modelos HTML, elementos personalizados e importações de HTML.
Os outros três podem outras perguntas semelhantes a esta aqui no SOpt, acredito eu.
Terminologia
A composição do Shadow DOM introduz vários conceitos básicos novos no desenvolvimento da Web. Antes de entrarmos em detalhes, vamos padronizar a terminologia para falarmos o mesmo idioma.
Light DOM
A marcação escrita por um usuário do seu componente. Esse DOM reside fora do shadow DOM do componente. Ele consiste nos filhos reais do elemento.
<button is="better-button">
<!-- the image and span are better-button's light DOM -->
<img src="gear.svg" slot="icon">
<span>Settings</span>
</button>
Shadow DOM
O DOM escrito pelo autor do componente. O Shadow DOM é local em relação ao componente e define sua estrutura interna e o CSS com escopo, bem como encapsula os detalhes da sua implementação. Além disso, ele define como renderizar marcação criada pelo consumidor do seu componente.
#shadow-root
<style>...</style>
<slot name="icon"></slot>
<span id="wrapper">
<slot>Button</slot>
</span>
Árvore plana do DOM (plane tree)
O resultado da distribuição do light DOM do usuário pelo navegador no shadow DOM, renderizando o produto final. A árvore plana é o que você finalmente verá no DevTools e o que será renderizado na página.
<button is="better-button">
#shadow-root
<style>...</style>
<slot name="icon">
<img src="gear.svg" slot="icon">
</slot>
<slot>
<span>Settings</span>
</slot>
</button>
Posso Usar (Can I Use?)


Tenha mais informações sobre a compatibilidade de navegadores e polyfills aqui.
Fonte: