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

Question

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

我们甚至无法<link />在阴影DOM中添加,所以目前我强制通过多个<style>标签复制代码.

我真的想知道这种用例的建议最佳实践是什么.

谢谢.

Answer 1

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

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