ViewEncapsulation.Native、ViewEncapsulation.None和ViewEncapsulation.Emulated的区别

Question

有人能解释一下ViewEncapsulation.None和ViewEncapsulation.Emulated与ViewEncapsulation.Native在angular2中的区别吗？

我试着在谷歌上搜索并阅读一些文章，但我无法理解其中的区别。

下面有两个组件Home (home.ts)，即父组件和MyComp (mycomp.ts)。我希望在子组件中使用的父组件中定义样式。

我应该使用ViewEncapsulation.Native还是ViewEncapsulation.None？

home.ts

import {Component, ViewEncapsulation} from 'angular2/core';
import {MyComp} from './my-comp';
@Component({
  selector: 'home',  // <home></home>
  providers: [
  ],
  directives: [
    MyComp
  ],
  styles: [`
    .parent-comp-width {
       height: 300px;
       width: 300px;
       border: 1px solid black;
     }
    `],
  template:`
    <my-comp></my-comp>
    <div class="parent-comp-width"></div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Home {
}

my-comp.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-comp',  // <home></home>
  template: `
  <div class="parent-comp-width">my-comp</div>
  `
})
export class MyComp {
}

Answer 1

update如果希望将添加到Parent中的样式应用于Child，则需要在Child组件中设置ViewEncapsulation.None，这样就不会阻止样式溢出。

Emulated和Native只是两种不同的方法，可以防止样式从组件中流入或流出。None是唯一允许样式跨越组件边界的。

原始

• ViewEncapsulation.None是简单的不封装。
• ViewEncapsulation.Emulated (目前是Angular2中的默认值) 向组件标记和子元素添加属性，并操作添加到页面中的CSS (将属性添加到选择器)，这样样式就不会相互渗透--使样式范围保持在添加它们的组件的范围内，即使在加载组件时样式都被添加到页面的顶部。
• ViewEncapsulation.Native使用阴影DOM创建自定义元素，其中浏览器本机实现确保样式范围的确定。 如果浏览器本机不支持影子DOM，则需要web组件多填充来缓冲行为。这与ViewEncapsulation.Emulated很相似，但是聚合填充更昂贵，因为它们填充了很多浏览器API，即使大多数API从未被使用过。Angulars Emulated仿真只是增加了它所使用的成本，因此对于角度应用来说效率要高得多。

Answer 2

• 本机：使用浏览器的原生阴影DOM。启用之前检查浏览器支持。
• ShadowDom:使用浏览器的本地影子DOM v1来提供更好的跨浏览器支持，并且是跨浏览器的共享标准。检查Shadow DOM v0与v1之间的差异。
• 模拟：模仿Shadow的行为，对组件的CSS进行范围调整，并将其附加到头部。
• None:既没有阴影DOM也没有自定义实现，就像全局CSS一样，它被追加到头部

角使用ViewEncapsulation.Emulated作为默认的封闭模式。

Answer 3

从前角书：

ViewEncapsulation值：

• 模拟：当指定此值时，角通过写入内容来模拟阴影DOM，如果没有指定封装值，则添加atrributes.This的样式是默认行为。 如果使用浏览器的F12开发工具检查DOM，您将看到外部CSS文件的内容。

... <style> div[\_ngcontent-c0] { background-color: lightcoral; } </style> ...

选择器已被修改，以便将div元素与名为_ngcontent-c0的属性匹配，尽管您可能会在浏览器中看到不同的名称，因为属性的名称是由角动态生成的。

为了确保样式元素中的CSS只影响由组件管理的HTML元素，模板中的元素将被修改，以便它们具有相同的动态生成属性，如下所示：

...
<div _ngcontent-c0="" class="form-group">
   <label _ngcontent-c0="">Name</label>
   <input _ngcontent-c0="" class="form-control ng-untouched ng-pristineng-invalid" 
        ng-reflect-name="name" name="name">
</div>
...

• 本机：当指定此值时，角使用浏览器的阴影DOM特性。只有当浏览器实现阴影DOM或您使用的是多边形填充时，这才能工作。
• None:当指定此值时，角简单地将未修改的样式添加到HTML的头部分，并让浏览器知道如何使用常规的CSS优先级规则应用样式。

应谨慎使用本机值和无值。浏览器对阴影DOM特性的支持是如此有限，因此只有在使用为其他浏览器提供兼容性的polyfill库时，使用本机选项才是合理的。

None选项将由组件定义的所有样式添加到HTML文档的head部分，并让浏览器知道如何应用它们。这可以在所有浏览器中工作，但是结果是不可预测的，并且不同组件定义的样式之间不存在隔离。