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/