如何在影子dom中使用全局css样式 [英] How to use global css styles in shadow dom

问题描述

阴影 dom 封装css样式，选择器不跨越阴影边界。

Shadow dom encapsulate css styles, selectors don't cross the shadow boundary.

问题：如何在影子dom中使用全局通用css样式？

（假设有一些常见的CSS样式将在所有页面中使用（例如：font-family，h1，h2，clear，reset ...），如何使它在阴影dom中工作？）

Question: How to use global common css styles in shadow dom?
(suppose there are some common css styles which will be used across all pages (e.g.: font-family, h1, h2, clear, reset ...), how to make it works in shadow dom?)

推荐答案

一些解决方案：

• CSS变量：
  
  

• CSS variables:

1. http://www.html5rocks.com/ en / tutorials / webcomponents / shadowdom-201 /


2. https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care ？hl = en


3. http://blog.chromium.org/2016/02/chrome-49-beta-css-custom -properties.html

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

：host-context ：
http://www.html5rocks.com/en/tutorials/ webcomponents / shadowdom-201 /

另外，我还没有测试过，但有人建议 @import url（'/ common-style.css' ）; ，这里：跨元素的聚合物共享样式

:host-context: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

Also, I haven't tested, but someone suggested @import url('/common-style.css');, here: Polymer share styles across elements

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

Please note, one of the articles listed above was also pointed out by Amid. By the time that article was written, Chrome had no CSS variables. But now it already works natively with the recently launched Google Chrome 49.

这篇关于如何在影子dom中使用全局css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！