Shadow-Piercing 后代组合子 '/deep/' ，包括 '::shadow' 伪元素，正在被弃用，那么我们如何穿透 Shadow DOM？

Question

假设我们有一些 CSS 代码用于类似动画 CSS 加载器之类的东西，我们希望在所有使用 Shadow DOM 的 Web 组件中使用它。如果我们无法像 ::shadow 和 /deep/ 那样穿透 Shadow DOM，我们如何重用这个 CSS 代码？

我们甚至不能在影子 DOM 中添加 <link />，所以目前我不得不通过多个 <style> 标签复制代码。

我真的很想知道针对此类用例的建议最佳做法是什么。

谢谢。

Answer 1

我建议您在 shadow root 内使用 css @imports 来加载需要的外部样式表，而不是使用 <link />。
我已经就该主题写了一个答案here。在下面引用它以供参考。

您可以创建一个 style.css 并将其导入到您的组件中，方法是： 模板中的 css @import。不会有多个网络调用， 因为浏览器会在您的第一个组件加载时缓存它并且 对于后续组件，它将从缓存中选择。