小编Dmi*_*kov的帖子

这个问题与StackOverflow上的其他问题类似,但我找不到任何适用于我的情况和非弃用方法的答案(我开始认为这种情况可能没有任何好的解决方案).

假设我们有一些main.css文件,其中包含按钮,列表,链接等的常用样式.所以它只是一些标准的.css文件,其中包含我们希望在整个应用程序中重用的常见样式.我们希望使用Shadow DOM将相同的样式应用于Web组件.

我知道有几种方法可以实现这一目标:

1. 使用一种不推荐的方法::: shadow,>>>,/ deep/selectors.但是那些选择器现在已经被弃用了,所以我想这不是一个好的方法来推进.
2. 使用css变量.如果我们需要设置一些属性,这种方法适用于自定义目的.但是如果我们想从main.css文件迁移10-20个常用样式,那就太复杂了.
3. 在Shadow DOM中使用@import语句或"link"标签.它会起作用,但会复制每个组件的所有样式.如果我们有10个Web组件,我们最终会得到10个完全相同样式的重复项.它听起来也不是一个好的解决方案.特别是如果我们有很多共同的风格,从性能的角度来看,它听起来可能是糟糕的解决方案.
4. 不要使用Shadow DOM并使用全局样式:)但它不是当前问题的解决方案.

我还检查了Angular Framework中如何解决相同的问题(我检查了Angular的第5版).当我将封装行为设置为Native时,它实际上只是复制样式(如上面描述的#3),我认为这不是最好的方式(但可能是目前最好的方式).

那么,有没有人知道是否有任何其他方法来解决这个问题没有上述缺点？听起来像Shadow DOM的当前缺点带来了比它试图解决的更多问题.