[selectors] Context selectors' limitation

[jolleekin]

Suppose I have a custom element called x-toggle, which has two states on and off reflected by two CSS classes on and off, respectively.

First I want to style the element based its states. This is simple as follows

:host(.on) { ... }
:host(.off) { ... }

Next, I want to support RTL layout. The attribute dir=rtl can be specified on x-foo itself or one of its ancestors.

1. dir=rtl is on x-foo

:host([dir=rtl].on) { ... }
:host([dir=rtl].off) { ... }

2. dir=rtl is on an ancestor. Currently, there's no way I can create the following selectors within x-foo's style tag. Will this problem be solved?

[dir=rtl] x-toggle.on { ... }
[dir=rtl] x-toggle.off { ... }

References:

• https://drafts.csswg.org/css-scoping/#host-selector

[fantasai]

You want :dir(rtl) here, actually. https://www.w3.org/TR/selectors4/#the-dir-pseudo

[fantasai]

Closing out as a non-issue. Comment back if there's something I'm missing. :)

[jolleekin]

I should have used a more general selector than dir=rtl. For example, I want to style x-toggle based on the UI mode of the host context.

.ui-light x-toggle.on { ... }
.ui-light x-toggle.off { ... }

.ui-dark x-toggle.on { ... }
.ui-dark x-toggle.off { ... }

How can this be achieved within the style tag of x-toggle?