Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

Question

Let's say we had some CSS code for something like an animated CSS loader that we want to use across all our web components which make use of the Shadow DOM. How do we re-use this CSS code if we are unable to pierce the Shadow DOM like it was possible with ::shadow and /deep/?

We can't even add a <link /> within the shadow DOM so currently I am force to duplicate the code via multiple <style> tags.

I would really like to know what the suggested best practices are for this type of use case.

Thank you.

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

Rather than using <link />, I'd suggest you to use css @imports inside shadow root to load external stylesheets where ever needed.
I have written an answer here on the topic. Quoting it below for reference.

You can create a style.css and import it in your components by putting a css @import in your template. There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.

edited May 23 '17 at 12:00

Community

1
1

answered Jan 10 '16 at 14:04

Abhinav

1,346
12
25

Such a simple solution not sure why I didn't think of this. Thank you. – Leon Revill Jan 10 '16 at 16:57
Could you possibly post an example of what you mean? – superluminary Oct 24 '17 at 13:07

Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

1 Answers1

Linked