html - Shadow Dom 中的 CSS 分组（进度元素）

Question

我这辈子都搞不定，为什么当你为 shadow DOM 设置样式时，你不能对 CSS 规则进行分组？问题是当您将影子 DOM 规则组合在一起时，CSS 规则作为一个整体会被丢弃。我必须像这样布置它们

&::-webkit-progress-value {
  background: red;
}
&::-moz-progress-value {
  background: red;
}
&::-ms-progress-value {
  background: red;
}
&::progress-value {
  background: red;
}

而不是这样的东西，用于潜在的未来证明：

&::-webkit-progress-value,
&::-moz-progress-value,
&::-ms-progress-value,
&::progress-value {
  background: red;
}

这是为什么？！有没有更好的方法来做到这一点？

这是代码笔： http ://codepen.io/marksyzm/pen/cKzjs/