javascript – 如何在阴影dom中使用全局css样式

阴影dom封装了css样式,选择器不会越过阴影边界.

问题：如何在影子dom中使用全局常见的css样式？
(假设有一些常用的CSS样式将用于所有页面(例如：font-family,h1,h2,clear,reset …),如何使它在阴影dom中工作？)

解决方法:

一些解决方案

> CSS变量：

> http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
> https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
> http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html

>：主机上下文：
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
>另外,我还没有测试过,但有人建议@import url(‘/ common-style.css’);,这里：Polymer share styles across elements

请注意,Amid也指出了上面列出的其中一篇文章.在撰写文章时,Chrome没有CSS变量.但现在它已经与最近推出的谷歌Chrome 49一起使用.

标签：javascript,web-component,shadow-dom
来源： https://codeday.me/bug/20191007/1868397.html