代码之家 › 专栏 › 技术社区 › Estus Flask

Angular 2原生视图封装

shadow-dom angular typescript javascript

Estus Flask · 技术社区 · 9 年前

已经有了 an answered question 这就解释了 ViewEncapsulation.Emulated , ViewEncapsulation.Native 广告 ViewEncapsulation.None .

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

另一种可能的情况是在Angular 2应用程序中调试视图,由于 ViewEncapsulation.仿真 .

是否可以将默认封装更改为 ViewEncapsulation.本机 对于所有未指定 encapsulation ?

其他实用的设备有哪些 ViewEncapsulation.本机 ?

1 回复 | 直到 8 年前

Estus Flask 9 年前

根据 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 使用脱机模板编译器时。

推荐文章

Max Smaleha · 聚合物2事件

8 年前

dangerChihuahua007 · 聚合物模块中有多个插入点?

8 年前

Flavien Volken · Angular 2.0从左到右模块和阴影DOM

9 年前

Estus Flask · Angular 2原生视图封装

9 年前

corysimmons · 使用JavaScript和/或CSS选择阴影DOM?

9 年前

cbfranca · 聚合物中的嵌套模板

10 年前

lebod · 带选择器的聚合物/阴影dom通用选择器

11 年前

Rob · 聚合物-造型主机的子节点

11 年前

user715564 · 将内容元素中的自定义元素与聚合物一起使用

11 年前

Günter Zöchbauer · 指针事件目标始终是最外层的Polymer元素

11 年前