问题描述
假设我们有一些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.
这篇关于阴影穿透后代组合器'/ deep /'，包括':: shadow'伪元素，正在被弃用，那么我们如何穿透Shadow DOM呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！