引导

这是一个很简单的话题，但是你很难在搜索到一篇比较完整的介绍它的文章，或者说单纯的告诉你 ViewEncapsulation 的用法而已，这在实际项目中远远不够的。

一、封装模式

分别为：

• Native 原先浏览器Shadow DOM行为。

• Emulated 仿真模式，通过Angular来模拟类似Shadow DOM的行为。

• None 无任何封装行为。

以上三种模式唯一的区别在于Shadow DOM，当然其作用是让组件的样式只进不出，换言之即组件内的样式不会影响到外部组件。有关于Shadow DOM更多的细节不在这里讨论。

三者的表现形式

假定使用以下代码：

@Component({
  template: `<h1>test</h1>`,
  styles: [`h1 { color: #f50; }`],
  encapsulation: ViewEncapsulation.Native
})

在不同模式下产生的HTML&CSS风格都不尽相同，了解这些不一样尤为重要。它们分别为：

Native:

#shadow-root (open)
    <style>h1 { color: #f50; }</style>
    <h1>test</h1>

Emulated:

<style>h1[_ngcontent-c0] { color: #f50; }</style>
<h1 _ngcontent-c0>test</h1>

None:

<style>h1 { color: #f50; }</style>
<h1>test</h1>

Native & None 在内容是一样的，但其后者会影响至其他外部组件的 h1 元素。

二、组件样式

组件样式的封装模式取决于我们对 encapsulation 的配置，例如上面的示例。当然你可以了在 main.ts 时为所有组件统一设定一种行的模式，例如：

platformbrowserDynamic().bootstrapModule(AppModule, {
  defaultEncapsulation: ViewEncapsulation.None
})

虽然三种模式都有不同的风格，但对于一个组件而言，如果没有一很合理的使用风格在实际项目中会让我们很头疼，特别是当项目中使用第三方组件库（例如：ngx-bootstrap、ng-zorro-antd、MATErial2 等）时，有时很容易受组件库的影响抑或需要让组件库与业务组件样式做一些微调时，了解一些细节非常重要。

例如一个用于渲染页面标头名曰：app-header 组件，其中 <nz-breadcrumb> 面包屑 默认情况下它会对最后一项进行加粗，但假设这不是我们希望的，而应该是一个不加粗和其他项一样的文本：

<nz-breadcrumb>
  <nz-breadcrumb-item>Home</nz-breadcrumb-item>
  <nz-breadcrumb-item>Detail</nz-breadcrumb-item>
</nz-breadcrumb>

最终生成的HTML是这样子：

<nz-breadcrumb _ngcontent-c1="" class="ant-breadcrumb">
    <nz-breadcrumb-item _ngcontent-c1="">
    <span class="ant-breadcrumb-link">
      Home
    </span>
    <span class="ant-breadcrumb-separator">/</span></nz-breadcrumb-item>
    <nz-breadcrumb-item _ngcontent-c1="">
    <span class="ant-breadcrumb-link">
      Detail
    </span>
    <span class="ant-breadcrumb-separator">/</span></nz-breadcrumb-item>
  </nz-breadcrumb>

倘若你不假思索的在 app-header 组件的 styles 属性中加上：