[csswg-drafts] Query current element style just like container style queries (#9834)

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

== Query current element style just like container style queries ==
Hi 👋🏻 

I'm really excited about new `@container` feature and even more excited about the [style queries](https://developer.chrome.com/docs/css-ui/style-queries) it brought to the table.

With this new API we can query the container and style the children accordion to that query (e.g. `--sunny: true`) however we can only style the children. In modern component based UIs we often want to style the component/element based on the queries like "Button variants => solid, outline, etc". Here's [tweet](https://twitter.com/me_jd_solanki/status/1747486389896372290) explaining my situation with code example.

<img src="https://pbs.twimg.com/media/GEBReB6bEAAFwkz?format=jpg&name=4096x4096" alt="tweet image" />

_(Above is just minimal example, surely we can just use color CSS var for shown example but this to demonstrate the case where we can have multiple styles like bg color, border color, text color and no way to style using style query)_

In above image, I've simple example where I want to style the button based on `--variant` CSS variable/property however I can't directly style the button itself so If we can provide an API for styling the element itself based on some style (this includes all styles like we do with container style query including `font-size`, `color`, etc).

_P.S. I'm new to raising issue here and the spec stuff so pardon me if I made some mistake_ 🙏🏻

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


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

Received on Tuesday, 23 January 2024 04:51:31 UTC