阴影穿透后代组合器'/ 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组件中使用它。我们如何重用这个CSS代码，如果我们无法刺穿Shadow DOM，像 :: shadow 和 / deep / ？

Let's say we had some CSS code for something like an animated CSS loader that we want to use across all our web components which make use of the Shadow DOM. How do we re-use this CSS code if we are unable to pierce the Shadow DOM like it was possible with ::shadow and /deep/?

我们甚至不能添加< link /> shadow DOM所以目前我强制通过多个< style> 标签复制代码。

We can't even add a <link /> within the shadow DOM so currently I am force to duplicate the code via multiple <style> tags.

谢谢。

推荐答案

而不是使用< link /> ，我建议你在阴影根内使用css @imports加载外部样式表需要。

我已在此主题上此处写了一个答案。

Rather than using <link />, I'd suggest you to use css @imports inside shadow root to load external stylesheets where ever needed.
I have written an answer here on the topic. Quoting it below for reference.

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

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.

这篇关于阴影穿透后代组合器'/ deep /'，包括':: shadow'伪元素，正在被弃用，那么我们如何穿透Shadow DOM呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！