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 (eg: 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.

Answer 2

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
) 

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 ShadowDOM s.

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

It is 2022

ShadowDOM is styled by:

• <style> within shadowDOM

• Inheritable styles
  https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

• (cascading) CSS properties

• shadowParts (and Themes)
  https://meowni.ca/posts/part-theme-explainer/

• <slot> are reflected , they are NOT styled by the shadowDOM, but by its container.
  See: ::slotted content

• (feb 2022) Constructible StyleSheets is still a Chromium only party
  https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

• your custom directive

Answer 5

Define styles in a base element and have all elements that need the style inherit from that base element.

With lit, something like this

export class AppComponentBase extends LitElement {
  static styles = css`
:host {
  font-family: sans-serif;
  font-size: 21px;
}
`;
}

And then in stead of inheriting from LitElement , make all components in your application inherit from AppComponentBase like this:

export class HomeRouteComponent extends AppComponentBase {

    render() {
        return html`
<h1>Home</h1>
<p>
    Welcome to my website
</p>
`;
    }
}

You can also add or some styles

export class HomeRouteComponent extends AppComponentBase {
    static styles = [super.styles, css`
h1 {
    color: red;
}
`]
    render() {
        return html`
<h1>Home</h1>
<p>
    Welcome to my website
</p>
`;
    }
}

Having a common component to inherit from may have other advantages. For instance to share some logic, although this might better be achieved via controllers.

This is all lit, but the same concept could be implemented with "bare" customElmements with relative ease.

Answer 6

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