Correct way to apply global styles into Shadow DOM

There's no real drawback with solution 3:

1. Whether you apply a CSS style to n elements in a main document, or to 1 element in n Shadow DOM, the style will be duplicated to the whole n elements anyways.

2. If you import a document n times in n Shadow DOM, il will be actually be loaded only one time and reused through the browser cache.

After that, it will depend on the browser implementation of Shadow DOM and CSS styles, and you should see a performance degradation only the thousands of Shadow DOM.

---

2019 update for Chrome 73+ and Opera 60+

Now you can directly instanciate a CSSStyleSheet object and assign it to different Shadow DOMs.

This way the HTML won't be duplicated.

var css = new CSSStyleSheet()
css.replaceSync( "@import url( main.css )" )
host.shadowRoot.adoptedStyleSheets = [css] 
host2.shadowRoot.adoptedStyleSheets = [css] 

You can also apply it to the global document:

document.adoptedStyleSheets = [css]

The other advantage is that an update on the stylesheet will be applied to all Shadow DOMs (and document) that adopted it.

 css.replaceSync( '.color { color: red }' )