css - Styling shadow DOM with external -
given webpage dynamically loaded web components (shadow dom) , external css files (bootstrap, etc.). want these css files applied within components (shadow dom). possible solutions?
- using polymer -- we're using angularjs , don't wanna start messing framework too. (although it's possible.)
- refactoring css files , include
/deep/
everywhere -- maintainability... - import each css file manually beginning
<style>
part of each shadow dom -- no comment...
is there better way apply whole css files within shadow doms?
question bit old, putting answer here in case helps.
- /deep/ has been deprecated
- other option use custom properties provided polymer.
if don't want use polymer suggested in discussion on /deep/ , ::shadow selectors deprecation thread, can use css @imports.
can generate url of external stylesheet , inject in shadow dom templates @ run-time.
have written descriptive answer here on topic.
Comments
Post a Comment