Styling shadow DOM with external

Question

Given a webpage with dynamically loaded web components (shadow DOM) and some external CSS files (Bootstrap, etc.). I want these CSS files to be applied within the components (shadow DOM). What are the possible solutions?

Using Polymer -- we're already using AngularJS and don't wanna start messing with another framework too. (Although it's possible.)
Refactoring the CSS files and include /deep/ everywhere -- maintainability...
Import each CSS file manually into the beginning <style> part of each shadow DOM -- no comment...

Is there any better way to apply whole CSS files within shadow DOMs?

I asked a very similar question to this once. stackoverflow.com/questions/16633057/… — James Donnelly
– James Donnelly, Commented Aug 18, 2014 at 15:19
In this case the dataflow is done by AngularJS. But the modular yet consistent styling is still an issue. Thx anyways. — Gábor Imre
– Gábor Imre, Commented Aug 18, 2014 at 15:32

Community · Accepted Answer · 2017-05-23 12:23:31Z

Question is a bit old, but putting this answer here in case it helps.

/deep/ has been deprecated
Other option is to use custom properties provided by Polymer.

If you don't want to use Polymer then as suggested in the discussion on the /deep/ and ::shadow selectors deprecation thread, you can you use css @imports.
You can generate the url of your external stylesheet and inject it in your shadow dom templates at run-time.
I have written a descriptive answer here on the topic.

Collectives™ on Stack Overflow

Styling shadow DOM with external

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related