浅谈 angular encapsulation 的三种使用方式

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

enum ViewEncapsulation {
  Emulated: 0  //default
  Native: 1
  None: 2
  ShadowDom: 3
}

基础用法：
   ① 这里单独的h1标签 可以看做是最顶级的一个 大爷组件

   ② 父组件

   ③ 子组件

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

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

3.Native和Shadow   使用原生的shadow封装样式，dom结构中可以看到阴影根（shadow-root），我们可以很好地看到样式是如何写入它的。 (参考资料) 。只对shadow-root 范围内的组件有效

native 属性值已经被弃用了，现在改用 shadow属性值 （可以参考 文章1 和 文章2）

参考文章