Question

我有一个示例存储库https://github.com/collinstevens/angular-encapsulation，它演示了我的问题。

共有三个组件：EmulatedComponent，NativeComponent和ShadowDomComponent，分别使用ViewEncapsulation.Emulated，ViewEncapsulation.Native和ViewEncapsulation.ShadowDom。

如https://angular.io/guide/component-styles所述，将EmulatedComponent中的样式复制到<head>中，但也复制到每个＃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

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

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

更新

考虑到要注释，通过告诉编译器使用compilerOptions来使所有组件都运行本机封装，以免与本机Web组件冲突。

通过添加tsconfig.json文件（在ng版本6+中为tsconfig.app.json）来做到这一点：

typing

Answer 2

三个主要区别：

1- ViewEncapsulation.Emulated预处理css代码以将深度范围扩展到组件以防止冲突，并且这是默认的角度模式，因为浏览器中的阴影dom有限支持...用于浏览器支持can i use < / p>

2- ViewEncapsulation.Native，它根据角度文档Read使用了不推荐使用的阴影dom版本。它的工作原理几乎与影子dom封装一样

3- ViewEncapsulation.ShadowDom当您使用ShadowDom时，为什么会在每个＃shadow-root中复制该样式，因为这是它的工作原理...当您激活ShadowDom时，它可以隐藏附着在常规树上的DOM树就像常规DOM树中的树一样，因此它通过制作高级作用域来复制应用于元素的样式，您实际上看到的是阴影dom，但理论上是常规DOM ...

进一步了解Shadow Dom MDN article

为获得最佳实践，角度团队推荐使用ViewEncapsulation.Emulated，这是默认设置，但在极少数情况下，请使用None或ShadowDom，但要谨慎使用。

ViewEncapsulation。通过ViewEncapsulation。（Native | ShadowDom）组件将模拟的样式复制到＃shadow-root中

2 个答案: