typescript ViewEncapsulation.Native、ViewEncapsulation.None 和 ViewEncapsulation.Emulated 之间的差异

Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

提问by Parmod

Can some one explain what's the difference between ViewEncapsulation.Native,ViewEncapsulation.Noneand ViewEncapsulation.Emulatedin angular2.

有些人能解释什么的区别ViewEncapsulation.Native，ViewEncapsulation.None和ViewEncapsulation.Emulated在angular2。

I tried to google it and read some articles, but I'm not able to understand the difference.

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

Below I have two components Home (home.ts) i.e. parent component and MyComp (my-comp.ts). I want to define styles in the parent that are being used in the child component.

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

Should I use ViewEncapsulation.Nativeor ViewEncapsulation.None

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

home.ts

家.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

我的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 {
}

采纳答案by Günter Z?chbauer

updateIf you want styles that are added to Parentapplied to Childyou need to set ViewEncapsulation.Nonein the Childcomponent so it doesn't prevent styles to bleed in.

更新如果您想要添加到Parent应用的样式，则Child需要ViewEncapsulation.None在Child组件中进行设置，这样它就不会阻止样式渗入。

Emulatedand Nativeare just two different ways to prevent styles to bleed in to and out from components. Noneis the only one that allows styles to cross component boundaries.

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

original

原来的

• ViewEncapsulation.None is simple no encapsulation

• ViewEncapsulation.Emulated (currently the default in Angular2)
  adds attributes to component tags and child elements and manipulates the CSS (adding the attributes to the selectors) added to the page so the styles don't bleed into each other - to keep styles scoped to the components where they are added even though the styles are all added collected in the head of the page when components are loaded.

• ViewEncapsulation.Native creates custom elements with shadow DOM where the browsers native implementation ensures the style scoping.
  If the browser doesn't support shadow DOM natively, the web-components polyfills are required to shim the behavior. This is similar to ViewEncapsulation.Emulatedbut the polyfills are more expensive because they polyfill lots of browser APIs even when most of them are never used. Angulars Emulatedemulation just adds the cost for what it uses and is therefore much more efficient for Angular applications.

• ViewEncapsulation.None 简单无封装

• ViewEncapsulation.Emulated（目前 Angular2 中的默认设置）
  为组件标签和子元素添加属性，并操作添加到页面的 CSS（将属性添加到选择器），这样样式就不会相互渗透 - 保持样式范围为添加它们的组件，即使所有样式都在加载组件时收集在页面的头部。

• ViewEncapsulation.Native 使用 shadow DOM 创建自定义元素，其中浏览器的本机实现确保样式范围。
  如果浏览器本身不支持 shadow DOM，则需要 web-components polyfills 来填充该行为。这类似于ViewEncapsulation.Emulated但 polyfills 更昂贵，因为它们 polyfill 了大量浏览器 API，即使它们中的大多数从未使用过。AngularsEmulated仿真只是增加了它使用的成本，因此对于 Angular 应用程序来说效率更高。

回答by Hardik Pithva

• Native:Uses browser's native Shadow DOM. Check for browser support before enabling it.
• ShadowDom:Uses browser's native Shadow DOM v1 for better cross-browser support and is a shared standard across the browsers. Check the difference between Shadow DOM v0 to v1.
• Emulated:Imitates behavior of Shadow DOM to scope the CSS for component and appends to the head.
• None:Neither Shadow DOM nor custom implementation, like global CSS which gets appended to the head

• Native：使用浏览器的原生 Shadow DOM。在启用之前检查浏览器支持。
• ShadowDom：使用浏览器的原生 Shadow DOM v1 以获得更好的跨浏览器支持，并且是跨浏览器的共享标准。检查 Shadow DOM v0 到 v1 之间的差异。
• 模拟：模仿 Shadow DOM 的行为来限定组件的 CSS 并附加到头部。
• 无：Shadow DOM 和自定义实现都没有，比如附加到头部的全局 CSS

Angular uses ViewEncapsulation.Emulated as default encapsualtion mode.

Angular 使用 ViewEncapsulation.Emulated 作为默认封装模式。

回答by fgul

from pro-angular book:

来自专业角度的书：

The ViewEncapsulation Values:

ViewEncapsulation 值：

• Emulated: When this value is specified, Angular emulates the Shadow DOM by writting content and styles to add atrributes.This is default behaviour if no encapsulation value is specified.

  If you inspect the DOM using the browser's F12 developer tools, you will see that the contents of the external CSS file.

• Emulated：当指定此值时，Angular 通过编写内容和样式来添加属性来模拟 Shadow DOM。如果未指定封装值，则这是默认行为。

  如果您使用浏览器的 F12 开发人员工具检查 DOM，您将看到外部 CSS 文件的内容。

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

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

The selector has been modified so that it matches div elements with an attribute called _ngcontent-c0although you may see a different name in your browser since the name of the attribute is generated dynamically by Angular.

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

To ensure that the CSS in the style element affects only the HTML elements managed by the component, the elements in the template are modified so they have the same dynamically generated attribute, like this:

为了确保 style 元素中的 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>
...

• Native:When this value is specified, Angular uses the browser's shadow DOM feature. This will work only if the browser implements the shadow DOM or if you are using a polyfill.
• None:When this value is specified, Angular simply adds the unmodified CSS styles to the head section of the HTML document and lets the browser figure out how to apply the styles using the normal CSS precedence rules.

• Native：当指定这个值时，Angular 使用浏览器的 shadow DOM 特性。只有当浏览器实现了 shadow DOM 或者你使用了 polyfill 时，这才有效。
• 无：当指定这个值时，Angular 简单地将未修改的 CSS 样式添加到 HTML 文档的头部部分，并让浏览器弄清楚如何使用正常的 CSS 优先规则来应用样式。

The Native and None values should be used with caution. Browser support for the shadow DOM feature is so limited that using the Native option is sensible only if you are using a polyfill library that provides compatibility for other browsers.

应谨慎使用 Native 和 None 值。浏览器对 shadow DOM 功能的支持非常有限，只有当您使用为其他浏览器提供兼容性的 polyfill 库时，使用 Native 选项才是明智的。

The None option adds all the styles defined by components to the head section of the HTML document and lets the browser figure out how to apply them. This has the benefit of working in all browsers, but the results are unpredictable, and there is no isolation between the styles defined by different components.

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

回答by Tejas Savaliya

Please refer below example to understand all three options :

请参考以下示例以了解所有三个选项：

encapsulation: ViewEncapsulation.Emulated
encapsulation: ViewEncapsulation.Native
encapsulation: ViewEncapsulation.None

Click hereto see the example

单击此处查看示例

回答by Aaron

If anyone's getting to this question because they want to style child components via parent component style declarations, see this SO answer.

如果有人因为想通过父组件样式声明为子组件设置样式而遇到此问题，请参阅此 SO 答案。

However, as the latest comment on the accepted answer indicates, the Angular docssay:

但是，正如对已接受答案的最新评论所表明的那样，Angular 文档说：

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具具有更广泛的兼容性。