关于angular中样式的作用域理解

angular encapsulation 的三种使用方式

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

1.对angular 组件渲染，每个组件有一个自己的作用域，比如 h标签在引用时 在a组件里定义了样式，这是在b组件使用h标签时 无法使用其已经定义好的样式，这时 encapsulation: ViewEncapsulation.Emulated, 这选项是为默认值 默认项，样式有范围封装，父组件不影响子组件的样式 （angular提供的样式封装机制）
   该选择是默认项，即在不手动配置encapsulation 的情况下，就是该值。在该配置项下，各组件有范围，父组件无法影响自组件
2.如果想让 h标签使用 全局的样式 需encapsulation: ViewEncapsulation.None 不提供任何封装，样式直接应用到整个document。 （向下影响自己的子组件，向上影响自己的父组件
3. 若只想在angular作用域中全部受影响
Native和Shadow   使用原生的shadow封装样式，dom结构中可以看到阴影根（shadow-root）

在使用一些第三方的组件的时候，要修改组件的样式。
这种情况下使用:

:host ::ng-deep .className{
新的样式…
}

::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
不过官方文档上说，ng-deep 在未来的版本中将被放弃，不知道未来会变成什么样的语法。使用的时候，记得为未来Angular升级带来的变化做准备。