javascript - 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.