Shadow DOM styling from the outside

Question

I am searching a way to styling shadow DOM from the outside. For example, I would like to set the color of all text in all 'span.special' elements as RED. Including 'span.special' elements from shadow DOM. How I can do this?

Previously there were ::shadow pseudo-element and /deep/ combinator aka >>> for this purpose. So I could write something like

span.special, *::shadow span.special {
    color: red
}

But now ::shadow, /deep/ and >>> are deprecated. So, what do we have as a replacement of them?

Answer 1

Well, @import is not a solution if you are working with library web component that you can't change ...

Finally I found several ways to do it:

1) Cascading. Styles of Shadow DOM's host element affect Shadow DOM elements also. Not an option if you need to style a particular element of the Shadow DOM, not every.

2) Custom properties https://www.polymer-project.org/1.0/docs/devguide/styling If an author of the web component provided such.

3) In Polymer, the have Custom Mixins also https://www.polymer-project.org/1.0/docs/devguide/styling

4) @import, but only for not-library components

So, there are several possibilities, but all of them are limited. No powerful enough way to outside styling as ::shadow were.

Answer 2

You could use @import css as explained in this answer to another question on SO.

Include the rule inside the style element in the shadow tree.

 <style>
   @import url( '/css/external-styles.css' )
 </style>

---

Note that the >>> combinator is still part of the CSS Scoping Module Draft.