1

I can't work out for the life of me why, when you are styling the shadow DOM, you can't group the CSS rules? The problem is that The CSS rule as a whole group is discarded when you group the shadow DOM rules together. I have to lay them out like this

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

Instead of something like this, for potential future proofing:

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

Why is that?! Is there a better way of doing this?

Here's the codepen: http://codepen.io/marksyzm/pen/cKzjs/

marksyzm
  • 4,457
  • 1
  • 25
  • 25
  • 3
    I'd answer...but I don't have time this minute, – Paulie_D Mar 31 '14 at 10:43
  • What the world needs right now are more facetious people. Here you go... edited! – marksyzm Mar 31 '14 at 10:58
  • 1
    Same by the ::selection property. See [here](http://stackoverflow.com/a/19075802/703717) - maybe this happens for psedo elements which have vendor prefixes? – Danield Mar 31 '14 at 11:06
  • Thanks! So there it is then. I'm guessing browsers aren't so flexible with the whole use of `::pseudo` combined with CSS then. That and... http://negativitysandwiches.com/we-need-to-have-a-talk-about-styling-html5-progress-bars-everyone/ – marksyzm Mar 31 '14 at 11:50
  • 1
    This has nothing to do with the shadow DOM. See the duplicate. – BoltClock Jun 02 '14 at 17:17
  • Thanks - I up voted the answers in the original accordingly. – marksyzm Jun 03 '14 at 13:24

0 Answers0