Shadow-Piercing 后代组合器 '/deep/' ,包括 '::shadow' 伪元素,正在被弃用,那么我们如何穿透 Shadow DOM?
Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?
假设我们有一些 CSS 代码用于类似于动画 CSS 加载器的代码,我们希望在所有使用 Shadow DOM 的 Web 组件中使用这些代码。如果我们无法像使用 ::shadow
和 /deep/
那样穿透阴影 DOM,我们如何重新使用此 CSS 代码?
我们甚至无法在阴影 DOM 中添加 <link />
,所以目前我不得不通过多个 <style>
标签复制代码。
我真的很想知道针对此类用例建议的最佳做法是什么。
谢谢。
与其使用 <link />
,我建议您在影子根目录中使用 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.
假设我们有一些 CSS 代码用于类似于动画 CSS 加载器的代码,我们希望在所有使用 Shadow DOM 的 Web 组件中使用这些代码。如果我们无法像使用 ::shadow
和 /deep/
那样穿透阴影 DOM,我们如何重新使用此 CSS 代码?
我们甚至无法在阴影 DOM 中添加 <link />
,所以目前我不得不通过多个 <style>
标签复制代码。
我真的很想知道针对此类用例建议的最佳做法是什么。
谢谢。
与其使用 <link />
,我建议您在影子根目录中使用 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.