Estilos com escopo dentro do DOM de sombra

Cada regra de <style> dentro de uma raiz de sombra se aplica somente dentro dessa raiz. p { color: red } em uma árvore de sombra colore apenas os parágrafos dentro dela — os parágrafos do documento principal não são afetados, e os estilos do documento principal não chegam à sombra.

O encapsulamento elimina o problema do CSS global que aflige aplicações grandes há décadas. Os estilos de um componente não podem ser sobrescritos acidentalmente pelo CSS do site, e o componente não pode danificar o site por acidente. O limite é definido pela especificação, não por uma convenção.

De dentro da sombra, estilize o elemento hospedeiro com :host. Use :host(selector) para restringir por seletor: :host([open]) { display: block; } corresponde ao hospedeiro somente quando o atributo open está presente.

As propriedades de CSS herdadas (color, font-family, line-height) ainda atravessam o limite da sombra por herança. Uma definição body { color: blue } no documento também deixa o texto da sombra azul, a menos que a sombra o sobrescreva explicitamente. Isso é uma característica útil: os padrões tipográficos permanecem consistentes.

As propriedades personalizadas (variáveis de CSS) são herdadas através das raízes de sombra, o que as torna a forma padrão de expor uma API de temas de um componente: declare --card-bg: var(--surface, white) dentro da sombra e permita que os consumidores substituam --surface no elemento hospedeiro.

Marque um elemento interno da sombra com part="name", e os consumidores poderão estiliza-lo com my-card::part(name) { ... }. Use parts como pontos de extensão para estilização individual, mantendo a maior parte da árvore de sombra encapsulada.

shadowRoot.adoptedStyleSheets = [sheet] compartilha uma CSSStyleSheet entre várias raízes de sombra, evitando a análise repetida de <style>. Crie folhas com new CSSStyleSheet() e sheet.replaceSync(cssText). Isso gera um grande ganho de desempenho em sistemas de componentes.

Coloque as tags <style> no início do innerHTML da sombra para que os estilos sejam analisados antes da construção do restante do DOM. Isso evita o breve aparecimento de conteúdo sem estilo que ocorre quando os estilos chegam tarde na ordem de análise.

:host-context(.dark-mode) :host estiliza o elemento hospedeiro com base em um seletor ancestral fora da sombra. Isso é útil para aplicar temas aos componentes com base em uma classe de um contêiner de nível superior. A compatibilidade dos navegadores é boa, mas verifique-a na matriz de navegadores de destino.

As redefinições de CSS em todo o documento (margens em body, box-sizing) não afetam as árvores de sombra. Reaplique as redefinições necessárias dentro de cada raiz de sombra ou compartilhe-as por meio de uma folha de estilo construída e adotada em cada componente.

O Chrome DevTools mostra as raízes de sombra no painel Elements, sob "#shadow-root (open)". Você pode inspecionar, editar e alternar os estilos da sombra como qualquer outro CSS, incluindo o pseudo-elemento :host e as regras ::part.

O DOM de sombra encapsula os estilos em ambas as direções. Estilize o elemento hospedeiro com :host, exponha pontos de extensão de temas por meio de propriedades personalizadas de CSS herdadas, exponha elementos individuais para estilização com ::part, compartilhe folhas de estilo com adoptedStyleSheets e reaplique as redefinições dentro de cada raiz de sombra, pois o CSS de todo o documento não atravessa o limite.