ViewEncapsulation.Emulated 样式被 ViewEncapsulation.(Native|ShadowDom) 组件复制到 #shadow-root 中答案

【问题标题】：ViewEncapsulation.Emulated styles are copied into #shadow-root by a ViewEncapsulation.(Native|ShadowDom) componentViewEncapsulation.Emulated 样式被 ViewEncapsulation.(Native|ShadowDom) 组件复制到 #shadow-root 中
【发布时间】：2018-11-03 07:01:20
【问题描述】：

我有一个示例存储库 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;
}

【问题讨论】：

标签： angular web-component shadow-dom

【解决方案1】：

这是一个已知的bug，目前的解决方法是基本上不混合封装模式。

但是我假设您遇到的情况可能是您正在混合具有不同类型封装模式的第三方？如果是这样，您要么必须考虑您的 css 结构，要么只是重新考虑您正在混合的第三方库。

更新

考虑到注释使所有组件运行原生封装，通过告诉编译器使用compilerOptions 这样做，以免与原生 Web 组件冲突。

通过添加您的 tsconfig.json 文件（在 ng 版本 6+ 中为 tsconfig.app.json）来实现：

"angularCompilerOptions": {
    "defaultEncapsulation": 1
}

【讨论】：

好吧，我正在尝试使用 shadow-dom 分发使用 Angular 元素构建的 Web 组件，以便我公司内的其他团队可以重用它们，无论它们是否处于 Angular 中，但注意到我们遇到了这个问题角度消耗角度元素的问题。我认为这是一个未解决的问题，但我的 google-fu 让我失望了。
@CollinStevens 你知道你是否在每个组件上指定了封装（如果是的话，很容易搜索和替换）？如果不是，那么您实际上可以更改以使用编译器选项将默认封装设置为本机（请参阅更新后的内容），但这仍然是不必要的更改的总体风险。
我不会尝试制作所有 ViewEncapsulation.Native，因为 ShadowDom v0 几乎没有支持 caniuse.com/#feat=shadowdom。我们的目标是 ShadowDom v1，因为它目前是多个浏览器的 WIP，caniuse.com/#search=shadow%20dom%20v1。我们将分发使用 ShadowDom v1 的 angular 元素构建的 Web 组件。如果使用 ViewEncapsulation.Emulated 的消费 Angular 应用程序，我们将遇到这个错误；我们试图不强制消费应用程序使用特定的封装。

【解决方案2】：

三者的主要区别：

1- ViewEncapsulation.Emulated 它将 css 代码预处理到组件的深层范围以防止冲突，这是 angular 的默认模式，因为浏览器中的影子 dom 有限支持...对于浏览器支持 can i use

2- ViewEncapsulation.Native 根据角度文档 Read 使用不推荐使用的 shadow dom 版本。它的工作原理与 shadow dom 封装几乎相同

3- ViewEncapsulation.ShadowDom 当您使用 ShadowDom 时，为什么会在每个 #shadow-root 中复制样式，因为这就是它的工作原理...当您激活 ShadowDom 时，它允许隐藏的 DOM 树附加到常规树它就像常规 DOM 树中的树，因此它通过创建高级范围复制适用于元素的样式，您实际上看到的是影子 dom，但理论上是常规 DOM...

更多关于Shadow Dom的信息MDN article

对于最佳实践和 Angular 团队的建议是使用 ViewEncapsulation.Emulated，这是默认设置，但在极少数情况下，您会使用 None 或 ShadowDom，但请谨慎使用。

【讨论】：

我了解 ViewEncapsulation.Native 使用的是 ShadowDom v0，而 ViewEncapsulation.ShadowDom 使用的是 ShadowDom v1，我了解 ViewEncapsulation.Emulated 本质上是 ShadyCSS。问题是为什么 EmulatedComponent 中的样式会被复制到 #shadow-roots 中？ ViewEncapsulation.Emulated 状态的文档，然后作用域样式将放置在 .