[css-selector-?][css-conditional-?]bring conditionals on custom properties to selector system

[PupilTong]

Proposal

Currently we have

The resolved proposal, if(), for inline conditions
#10064 for one inline style value.

The style query with container queries
https://drafts.csswg.org/css-conditional-5/#style-container for all children of one container.

We could just implement a general way to combine all this ability and bring it into selector system.

So there are two possible ways for this.

• :container selector to select the container root

@container style(--children-color:red) {
  :container > div {
   /*Just like the usage of :scope*/
   background:red;
 }
}

• :style() Pseudo-classes to select any DOM

:style(--children-color:red) > div {
   /*Just like the usage of style query for container*/
   background:red;
}

Usage

The key feature of condition with custom properties is that it involves the cascading system.

When we implement a pure custom-element(web-component) based library, it will be very helpful to allow users to styling elements using some CSS vars.

For example, we could have a custom element <list-view> with new selector

list-view:style(--texture:red-pink):nth-child(even) {
  background-color: pink;
}
list-view:style(--texture:red-pink):nth-child(odd) {
  background-color: red;
}

[TKDev7]

See #10744