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


Tags: javascript,css,css3,web-component,shadow-dom

Problem :

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.



Solution :

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.


    CSS Howto..

    How to style this value with jQuery

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    How to inline the contents of an entire stylesheet with Wordpress?

    How to get less to output a css variable with quotes

    How to implement a CDN failsafe for css files?

    How to remove and override CSS attribute from parent class?

    how to change the position of these links within div header

    How is this font face in CSS3 embedded into a css file?

    CSS: How to target a specific cell inside a table?

    Mysterious color showing up on tab hover

    How to make device width-height based html & css via PhoneGap

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    How to remove a CSS class from all same level table rows When a Row is Selected?

    how to increase the photoshop sprite canvas width and height

    How do you change the font-size of a custom css style?

    How to select Parent Div in CSS [duplicate]

    How can I create a pop up like the one Google Calendar uses ?

    Showing images next to paragraph

    How to apply css to buttons inside gridview

    How to make CSS column not be forced down

    How to limit input text length using CSS3? [duplicate]

    How to mail HTML/CSS output as attachment?

    css transition effects on show/hide element using css3 [duplicate]

    How to have an image incorporate in my text ? HTML CSS

    How to solve this weird issue in html table and css.

    CSS parser/abstracter? How to convert stylesheet into object

    How to set font family and size in html/css

    How to manage css files the best way

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    css3 : how to make div go up to bottom of page?