angular encapsulation 的三种使用方式

小渣渣

根据最新版的官网文档显示，encapsulation现在有4个属性值了：

登录可见。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

Emulated 默认项

样式有范围封装，父组件不影响子组件的样式 （angular提供的样式封装机制）
   该选择是默认项，即在不手动配置encapsulation 的情况下，就是该值。在该配置项下，各组件有范围，父组件无法影响自组件。如果非要在该配置项下，让父组件的样式 覆盖子组件的样式。可以使用 ::ng-deep ，但是官网不推荐使用 ::ng-deep


None

不提供任何封装，样式直接应用到整个document。 （向下影响自己的子组件，向上影响自己的父组件）


Native和Shadow

使用原生的shadow封装样式，dom结构中可以看到阴影根（shadow-root），我们可以很好地看到样式是如何写入它的,只对shadow-root 范围内的组件有效。

小渣渣

登录可见。