组件代码
@Component({
selector: 'app-quill',
templateUrl: './quill.component.html',
styleUrls: ['./quill.component.css',
'../../../../node_modules/quill/dist/quill.snow.css'],
encapsulation: ViewEncapsulation.None
})
构造不再细说,重点是encapsulation配置项,此配置决定样式的作用域;
encapsulation
-
ViewEncapsulation.None
表示创建全局样式,会在页面的style标签中创建样式,作用域整个DOM -
ViewEncapsulation.Emulated
Angular不会为该组件创建Shadow DOM;样式将被限定于组件;这是封装的默认值。
会在页面头部style标签中看到类似:h1[_ngcontent-orm-c0]{ color:red; }
-
ViewEncapsulation.ShadowDom
不会再页面头部生成标签,而是在dom中生成一个shadowDom的东西,类似于封装的dom组件,作用域在该组件内有效