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

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.

Answer 2

You do it via ::shadow pseudo-element. Like this:

::shadow .redColor
{
    background-color: red;    
}

That will apply styling to all elements inside shadow trees with .redColor class.

More info + other styling possibilities in this great article: Shadow DOM 201

Answer 3

I've just struggled with the same problem as an original issue, namely: defining once some global rule for, say, <h3> element and benefit from that within any/many ShadowDOMs.

No, css-variables are not suited well for this thing, since even if I've defined once, say, font and color variables for <h3>, I'll still need to go over each and every shadowed stylesheet and add a CSS rule consuming them.

At the point of writing this (yes, we are 2019 now) the shortest standardized solution is indeed importing some global common CSS. Works perfectly in Chrome, Firefox and Anaheim (Edge on Chromium).

It still requires to add an @import rule in each and every component, so still costy (from coding/maintenance POV, the stylesheet fetched only once), but that's the lowest price we can pay now.

Answer 4

Non of the provided links work for me in Chrome 66 (as of 2018) so I ended up with this to customize custom element from outside:

<custom-element tabindex=10>
  <style>
    :host div {
      --color: red;
    }
  </style>
</custom-element>

class Element extends HTMLElement {
    constructor() {
        super();
        var shadow = this.attachShadow({mode: 'open'});

        var user_style = shadow.host.innerHTML.match(/<style>([\s\S]*?)<\/style>/);
        var style = document.createElement('style');
        style.innerHTML = `
            :host div {
                color: var(--color, #aaa);
             }
        ` + user_style ? user_style[1] : '';    

        shadow.appendChild(style);
        shadow.host.querySelector('style').remove();
    }
}

customElements.define(
  "custom-element",
  Element
)