javascript - 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 来在需要的地方加载外部样式表。
我写了一个答案here关于这个话题。下面引用它以供引用。

You can create a style.css and import it in your components by putting a css @import in your template. There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.