已经有 an answered question这解释了 ViewEncapsulation.Emulated、ViewEncapsulation.Native 和 ViewEncapsulation.None 之间的区别。
假设有一个 Electron 应用程序保证与原生支持影子 DOM 和 ViewEncapsulation.Native 的 Chromium 版本捆绑在一起。这种情况如何从 native 封装中受益以避免仿真开销？
另一种可能的情况是在 Angular 2 应用程序中调试 View ，由于 ViewEncapsulation.Emulated，这些 View 与辅助属性和命名空间 CSS 类混在一起。
是否可以为所有未指定封装的组件全局更改默认封装为ViewEncapsulation.Native？
ViewEncapsulation.Native还有哪些实用工具？
最佳答案
根据 https://github.com/angular/angular/pull/7883这应该有效
import {CompilerConfig} from '@angular/compiler';
bootstrap(AppComponent, [{
provide: CompilerConfig,
useValue: new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Native})
}])
虽然我自己还没有尝试过。
我猜 ViewEncapsulation.Native在仅针对 Chrome 的情况下，这将是最有益的。在其他浏览器发布其影子 DOM 支持之前，似乎还需要相当长的时间。
主要的好处是Angular2不需要给每个组件元素添加属性，也不是所有的组件样式都需要添加到<head>中。不再。
在大多数情况下，使用 Emulated 性能不会成为问题使用离线模板编译器时。
关于javascript - Angular 2 原生 View 封装，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38255385/