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.

Answer 1

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.