Provide a CSS method to toggle off elements bypassing shadow DOM

[luwes]

Sparked from an internal convo around how to build a system to hide specific Media Chrome elements from a consumer of a Media Chrome Theme (e.g. Mux Player) without adding too much burden on the Theme developer and possibly keeping everything more consistent from theme to theme.

Specific areas in Media Chrome are split in layers which are also CSS parts:
layer media-layer poster-layer vertical-layer centered-layer

Could the combo of these parts with CSS vars (e.g. --media-play-button-off or --media-play-button-display) for each Media Chrome element be enough to toggle off a center play button for example?

The theme would still need to export some Media Chrome parts but that seems not too complex.

<media-controller exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer">

CSS parts on the Media Chrome elements in the theme itself do provide some advantages like possibly switching the order and position of the element in a flex row though this could potentially also be achieved with a --media-play-button-order CSS var.