How to use global css styles in shadow dom

Question

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

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?)

Answer 1

Some solutions:

• 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
• :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

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.