使用外部样式表为 Shadow DOM 添加样式

Question

给定一个包含动态加载的 Web 组件 (Shadow DOM) 和一些外部 CSS 文件 (Bootstrap等) 的网页。我想让这些 CSS 文件在组件 (Shadow DOM) 内生效。有哪些可能的解决方案？

• 使用 Polymer -- 我们已经在使用 AngularJS，不想再去搞另一个框架。(虽然这是可行的。)
• 重构 CSS 文件并在每个地方添加 /deep/ -- 可维护性...
• 手动将每个 CSS 文件导入到每个 Shadow DOM 开始的 <style> 部分中 -- 没有评论...

有没有更好的方法可以使整个 CSS 文件在 Shadow DOM 中生效呢？

- Gábor Imre

---

我曾经问过一个非常类似的问题。https://dev59.com/-GQn5IYBdhLWcg3wto5W - James Donnelly

在这种情况下，数据流是由AngularJS完成的。但是模块化而一致的样式仍然是一个问题。无论如何，谢谢。 - Gábor Imre

Answer 1

这个问题有点老，但是我提供答案希望能帮到你。

1. /deep/已经被弃用
2. 另一个选择是使用Polymer提供的自定义属性。

如果你不想使用Polymer，那么可以像在/deep/和::shadow选择器弃用线程的讨论中建议的那样，使用css @imports。
你可以在运行时生成外部样式表的url，并将其注入到你的影子dom模板中。
我在这里写了一个详细的答案。

- Abhinav