Angular 2 原生视图封装

Question

已经有解释了 ViewEncapsulation.Emulated、ViewEncapsulation.Native 和 ViewEncapsulation.None 之间的区别。

假设有一个 Electron 应用程序保证与原生支持影子 DOM 和 ViewEncapsulation.Native 的 Chromium 版本捆绑在一起。这种情况如何从本机封装中受益以避免仿真开销？

另一种可能的情况是在 Angular 2 应用程序中调试视图，由于 ViewEncapsulation.Emulated.[=20=，这些视图与辅助属性和命名空间 CSS 类严重混乱]

是否可以将所有未指定 encapsulation 的组件的默认封装全局更改为 ViewEncapsulation.Native？

ViewEncapsulation.Native还有哪些实用工具？

Answer 1

根据 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 在大多数情况下性能不会成为大问题。

Angular 2 原生视图封装

Angular 2 native view encapsulation

javascript

shadow-dom

typescript

angular