0%

angular-styles

今天这篇主要讨论一下Angular框架如何处理样式。

Angular如何隔离样式

因为Angular是组件话的,每一个Component有自己的样式文件,那么Angular是如何保证多个组件之间的样式不会互相影响的呢?

Angular的样式封装

Angular中有三种样式封装方式:

  • Emulated:默认的样式封装方式,通过给每个组件的样式添加一个唯一的属性,来实现样式的隔离。
  • ShadowDom:使用原生的Shadow DOM来实现样式的隔离。
  • None:不对样式进行封装,直接使用全局样式。
    关于这三种样式封装方式的详细介绍,可以参考angular-view-encapsulation

ng::deep

如何处理全局样式