10

This answer mentions that /deep/ can be used to select elements across shadow DOM boundaries. However, I already have a stylesheet from a theme my client bought. Is it possible to make the selectors in the stylesheet work across shadow DOM boundaries without changing the stylesheets themselves? Other places suggest using applyAuthorStyles but this appears to be removed from the shadow DOM specification.

Community
  • 1
  • 1
  • Are you making your own custom elements, or using the core- and paper- ones directly? – Al Bechard Aug 15 '14 at 13:10
  • Custom elements, but they contain HTML elements targeted by the stylesheet of the theme. The stylesheet has `a b` selectors where only `b` is in the Polymer element. –  Aug 15 '14 at 16:00
  • 1
    Have you tried using the existing stylesheet in the element definition? – Al Bechard Aug 15 '14 at 17:28
  • @Casses I have. It doesn't make `a b` selectors work when `a` is outside the Polymer element and `b` is inside it. –  Aug 15 '14 at 17:30
  • I believe the exact behavior you want is not possible without modifying the stylesheet at all. Shadow DOMs exist to provide encapsulation, to give developers some sort of security their elements will not be messed with. You want to, basically, get rid of all encapsulation, which contradicts aforementioned principle. You could, however, insert `/deep/` between every two selectors in CSS with a script, which should be *relatively* painless. I know this is not the answer you are looking for, hence I will leave it as a comment. – Cu3PO42 May 30 '15 at 16:08
  • You might want to use stylus pre-processor to easily prepend `/deep/` to the selectors. https://learnboost.github.io/stylus/try.html `//deep/ { /* css here */ }` – orlland Oct 01 '15 at 08:08

1 Answers1

1

Since /deep/ and ::shadow selectors have been deprecated and you don't want to modify existing stylesheet anyway, I'd suggest you to use css @imports in your component templates(which I am assuming you'll be cloning and using as shadow roots) to include this external stylesheet. This will essentially make this style local to your components and will be available inside shadow-dom.

If you are worried about performance implications, see this answer on same.

tl;dr;

With browser caching, there's essentially no penalty to so many imports, in fact it is likely faster than cascading the styles through multiple shadow trees using piercers.

Community
  • 1
  • 1
Abhinav
  • 1,346
  • 12
  • 25