3

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?

Gábor Imre
  • 5,899
  • 2
  • 35
  • 48
  • 1
    I asked a very similar question to this once. http://stackoverflow.com/questions/16633057/is-it-possible-to-access-shadow-dom-elements-through-the-parent-document – James Donnelly Aug 18 '14 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 Aug 18 '14 at 15:32

1 Answers1

3

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

  1. /deep/ has been deprecated
  2. 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.

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