Limitations on host context selection

[jolleekin]

Let's say I have a custom element named x-toggle that can be either on or off. I want to style it based on its state and a color mode (light or dark). The color mode is specified by adding a CSS class (.ui-light or .ui-dark) to a parent element (usually html). Is there any way I can achieve the following style rules? Currently, this is impossible.

.ui-light x-toggle.on { ... }
.ui-light x-toggle.on:hover { ... }
.ui-light x-toggle.on:active,
.ui-light x-toggle.on:hover:active { ... }
.ui-light x-toggle.off { ... }
...

[jolleekin]

What about introducing :parent-context(<compound-selector>)? Unlike :host-context(<compound-selector>), which matches the host if a parent element matches <compound-selector>, :parent-context only matches a parent element.

:parent-context(.ui-light) :host(.on) { ... }

[jolleekin]

Any solution?

[tabatkins]

I don't understand why, in your example, you wouldn't want to turn on the "light" UI when the class is on the host element itself.

Anyway, you can already achieve this:

:host-context(.ui-light):host(:not(.ui-light)) ... {}