angular4系列之ViewEncapsulation

ViewEncapsulation

• import { ViewEncapsulation } from ‘@angular/core’;
• @Component({encapsulation:ViewEncapsulation.None})

是什么

• 先了解 web Components

  • 它通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。

  • web Components 由四种技术组成：

    • Custom Elements - 自定义元素

    • HTML Templates - HTML模板

    • Shadow DOM - 影子DOM

    • HTML Imports - HTML导入

• 其中的 shadow Dom 和 ViewEncapsulation 相关
• so ViewEncapsulation是一种【视图包装】

ViewEncapsulation简介

• ViewEncapsulation 允许设置三个可选的值：

  • ViewEncapsulation.Emulated - 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。

  • ViewEncapsulation.Native - 使用原生的 Shadow DOM 特性

  • ViewEncapsulation.None - 无 Shadow DOM，并且也无样式包装

ViewEncapsulation.None

• ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉

ViewEncapsulation.Emulated

• ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 .greet 类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式。

ViewEncapsulation.Native

• ViewEncapsulation.Native 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染，渲染结果如上图所示。

参考博客