ViewEncapsulation.Emulated 樣式由 ViewEncapsulation.(Native|ShadowDom) 組件復制到 #shadow-root 中

Question

我有一個示例存儲庫https://github.com/collinstevens/angular-encapsulation ，它演示了我的問題。

共有三個組件：EmulatedComponent、NativeComponent 和 ShadowDomComponent，它們分別使用 ViewEncapsulation.Emulated、ViewEncapsulation.Native 和 ViewEncapsulation.ShadowDom。

EmulatedComponent 中的樣式被復制到<head> ，如https://angular.io/guide/component-styles 所述，但也被復制到每個 #shadow-root 中，我想知道為什么，以及如何如果可能的話，防止這種情況發生。

emulated.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
}

native.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
}

shadow-dom.component.scss

div {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: inline-block;
}

Answer 1

這是一個已知的錯誤，目前的解決方法是基本上不混合封裝模式。

但是我假設您遇到的情況可能是您正在混合具有不同類型封裝模式的第三方？ 如果是這樣，您要么必須考慮您的 css 結構，要么只是重新考慮您正在混合的第三方庫。

更新

考慮到評論使所有組件告訴編譯器這樣做運行本地封裝compilerOptions為了與本地Web組件不會發生沖突。

通過添加您的 tsconfig.json 文件（它是 ng 版本 6+ 中的 tsconfig.app.json）來做到這一點：

"angularCompilerOptions": {
    "defaultEncapsulation": 1
}

Answer 2

三者的主要區別：

1- ViewEncapsulation.Emulated它預處理css代碼到組件的深層以防止沖突，這是angular的默認模式，因為瀏覽器中的shadow dom有限支持......對於瀏覽器支持，我可以使用

2- ViewEncapsulation.Native根據 angular doc Read使用棄用版本的 shadow dom。 它的工作原理幾乎與 shadow dom 封裝相同

3- ViewEncapsulation.ShadowDom當您使用ShadowDom ，為什么會在每個 #shadow-root 中復制樣式，因為這就是它的工作方式...當您激活ShadowDom它允許隱藏的 DOM 樹附加到常規樹，就像常規樹中的樹一樣因此，DOM 樹通過創建高級范圍來復制應用於元素的樣式，您實際上看到的是 shadow dom，但理論上是常規 DOM ......

進一步閱讀 Shadow Dom MDN 文章

對於最佳實踐以及 angular 團隊推薦的是使用ViewEncapsulation.Emulated ，這是默認的，但在極少數情況下，您使用None或ShadowDom但要謹慎使用。

ViewEncapsulation.Emulated 樣式由 ViewEncapsulation.(Native|ShadowDom) 組件復制到 #shadow-root 中

問題描述

2 個解決方案

解決方案1
1 已采納 2018-11-03 21:03:32

解決方案2
0 2018-11-03 09:54:20

ViewEncapsulation.Emulated 樣式由 ViewEncapsulation.(Native|ShadowDom) 組件復制到 #shadow-root 中

問題描述

2 個解決方案

解決方案1 1 已采納 2018-11-03 21:03:32

解決方案2 0 2018-11-03 09:54:20

解決方案1
1 已采納 2018-11-03 21:03:32

解決方案2
0 2018-11-03 09:54:20