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 can I remove/cover up a section of a border?

    How to fix layout to browser window without scroll

    How can I implement dynamic styling for ion-list elements with AngularJS?

    CSS: how to apply styles to the last of a CSS class (not the last of )

    How to animate semicircle-like meter indicating elapsed time with HTML/CSS/JS?

    how to stop this irritating css behaviour

    How can I apply styles to a label whose checkbox is checked using only CSS?

    how to position a container in the middle of the screen? [duplicate]

    How to select every 4th div inside another div CSS Selector [closed]

    Nginx server (not showing changes) - Delete cache?

    how are large quantities of css templates produced?

    How to change CSS where id=array(index)?

    How to get arrows appear on carousel only on hover

    How do I install SASS with Mean.io?

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    How to Find and replace class with javascript (No JQ)

    How to align Navbar at bottom of window, but have content under this in CSS?

    How to style nested ID-elements in CSS/SASS

    How to have only one page in a rails project be linked to a certain stylesheet?

    How do I change the css gradient values when my progress bar value changes?

    How to get row of floated images inside a div element to resize with browser window

    How to get the header and navbar on top?

    AJAX Call returns JSON, how to render properly formatted data

    How to use absolute path of an image in css using jquery?

    how to make a timeline using html, css, javascript?

    How can I make jQuery's draggable function expand the container?

    How can I resize images that are loaded onto a page?

    Showing Div via CSS selector within a UL

    How to show the same font which in photoshop on my webpage?

    How to set different css attributes with JQuery?