使用外部设置阴影DOM

Question

给定一个带有动态加载的Web组件（shadow DOM）和一些外部CSS文件（Bootstrap等）的网页。我希望这些CSS文件应用于组件（shadow DOM）中。有哪些可能的解决方案？

• 使用聚合物 - 我们已经在使用AngularJS，并且也不想开始搞乱其他框架。 （虽然这是可能的。）
• 重构CSS文件并在任何地方包含/deep/ - 可维护性......
• 手动将每个CSS文件导入每个影子DOM的开始<style>部分 - 无评论......

有没有更好的方法在影子DOM中应用整个CSS文件？

Answer 1

问题有点陈旧，但请将此答案放在此处以防万一。

1. / deep /已经deprecated
2. 其他选项是使用Polymer提供的custom properties。

如果你不想按照/ deep /和:: shadow选择器弃用线程的discussion的建议使用Polymer，你可以使用css @imports。
您可以生成外部样式表的URL并在运行时将其注入阴影dom模板中 我已就该主题撰写了描述性答案here。