angular视图封装

说明

angular提供了视图封装的功能，便于我们写样式的时候，能够去控制这个样式是只作用于当前组件，还是全局，还是作用域shadow dom。

分类

下面是一个组件的ts

@Component({
  selector: 'app-shitufengzhuang',
  template:`<h2>None</h2>`,
  styles:['h2{color:red}'],
  // encapsulation: ViewEncapsulation.None,
  encapsulation: ViewEncapsulation.Emulated
})

ViewEncapsulation

1. ShadowDom 这个难以理解，请看下面的分析
2. Emulated 只应用于组件的视图，即使该组件中包含子组件，对子组件也没效果
3. None 样式全局应用

Shadow DOM解释

HTML文档中的所有元素和样式以及DOM都位于一个全局范围内。页面上的任何元素都可以通过document.querySelector（）方法访问，无论它在文档中的嵌套程度如何或放置在何处。同样，应用于文档的CSS可以选择任何元素，无论它在何处。

但是我们在开发的过程中，有很多时候，只想改变其中一个P标签的颜色，我们会怎么做？给他一个id,去特殊标识，或者给它一个class，去获取。

但是、但是；当写了很多元素时，这就很难控制了，不可能写一万个死的id吧。所以，我们可以用shadow dom去搞。说白了，shadow dom就是dom中的dom。
在它里面写的样式，不会影响到主dom树。

在某些方面，shadow DOM是DOM的“精简”版本。与DOM一样，它是HTML元素的表示，用于确定在页面上呈现的内容并启用元素的修改。但与DOM不同，shadow DOM不是基于完整的独立文档。正如其名称所示，shadow DOM始终附加到常规DOM中的元素。没有DOM，shadow DOM就不存在了

用的不多，大家了解一下即可。毕竟框架已经帮我们做了很多。