angular组件样式作用域

组件代码

@Component({
  selector: 'app-quill',
  templateUrl: './quill.component.html',
  styleUrls: ['./quill.component.css',
    '../../../../node_modules/quill/dist/quill.snow.css'],
    encapsulation: ViewEncapsulation.None
})

构造不再细说，重点是encapsulation配置项，此配置决定样式的作用域；

encapsulation

1. ViewEncapsulation.None
   表示创建全局样式，会在页面的style标签中创建样式，作用域整个DOM

2. ViewEncapsulation.Emulated
   Angular不会为该组件创建Shadow DOM；样式将被限定于组件；这是封装的默认值。
   会在页面头部style标签中看到类似：

   h1[_ngcontent-orm-c0]{
   	color:red;
   }
   

3. ViewEncapsulation.ShadowDom
   不会再页面头部生成标签，而是在dom中生成一个shadowDom的东西，类似于封装的dom组件，作用域在该组件内有效