No nível do aplicativo, devemos usar: ViewEncapsulation.Noneporque não precisamos herdar (estamos no nível raiz)
No nível do componente, basta usar: ViewEncapsulation.Emulated(que é a configuração padrão)
Isso criará um atributo extra para o elemento DOM. Então h1se torna h1[_ngcontent-bub-3].
Dado isso, a h1especificidade do seletor aumenta de 1 para 11 e .classaumenta de 10 para 20 (por isso, é sempre fácil substituir os seletores herdados, mas pode causar dores de cabeça em caso de comportamento inesperado)
ViewEncapsulation.Native apenas trava o Safari (pode estar faltando polyfill?) Pendente de teste adequado
Se quisermos usar ViewEncapsulation.Native, devemos estar cientes que seletores como html body h1 { … }não funcionam mais, porque o DOM foi alterado.