[csswg-drafts] [css-selector-?][css-conditional-?]bring conditionals on custom properties to selector system (#10910)

PupilTong has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-selector-?][css-conditional-?]bring conditionals on custom properties to selector system ==
## Proposal
Currently we have 

The resolved proposal for inline conditions
https://github.com/w3c/csswg-drafts/issues/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

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

* `:style()` Pseudo-classes to select any DOM

```css
: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

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




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10910 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 18 September 2024 04:24:04 UTC