如何防止全局CSS選擇器干擾Angular（6）中的隔離組件？

Question

即使您將組件樣式表僅單獨應用於其組件（例如，使用默認的ViewEncapsulation.Emulated ），您將在模板上使用的類名仍會與任何現有的全局樣式發生沖突，因此您實際上不能使用多個單類名稱空間。

這可能導致始終為類名加上前綴，從而導致名稱組很長，很奇怪。

是否有最佳實踐來保持您的班級名稱簡潔明了（理想情況下為1個字），而又不會與任何可能存在的全局樣式沖突？

實際用例示例：如果我使用引導程序，則在樣式組件級自定義邏輯行時不能使用class="row" 。

看看這個StackBlitz 。 我想我的頭a組件是固定的寬度只有接壤，但它最終也有由於全球造型的紅色背景。

是。 我可以使用其他單詞，但是我應該始終了解全局樣式當前使用的整個單詞集，更不用說我不知道​​將來是否會添加更多的全局樣式，特別是在大型應用程序中。

Answer 1

將視圖封裝更改為本機封裝將使Angular使用本機陰影DOM並避免全局樣式的沖突

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css'],
  encapsulation:  ViewEncapsulation.Native
})