Hi,

When Web authors build custom media controls, they have to build a bunch
of appearance-related stuff imperatively in JS that should be easy to do
in a declarative manner.

For example, it's common to have a play/pause button whose appearance
depends on whether or not the media is playing.

:matches(video, audio) + .controls button.playpause {
background-image: url(pause.png);
}

:matches(video, audio):paused + .controls button.playpause {
background-image: url(play.png);
}

Similarly, volume controls often have a special appearance when the
media is muted.

:matches(video, audio) + .controls .volume {
background-image: url(vol-normal.png);
}

:matches(video, audio):muted + .controls .volume {
background-image: url(vol-muted.png);
}

Thanks,
Tess