Re: [csswg-drafts] [selectors] Parameterized selectors (#10567)

One use case I can see for this feature is styling elements belonging to a component instance based on attributes set on the component instance's root element when several instances are intertwined.

The `@scope` feature, which has been partially thought to style component's elements, doesn't help in such cases, because it always ties elements to the closest component instance's root element. It doesn't allow to style elements scattered across several instances of the same component.

For example, if a button belongs to Dialog component is nested in two Dialog component instance's root element, but belongs to the outer one, then the only way to style the button based on a state/variant/modifier belonging to its component instance is to add that state/variant/modifier to the button element, and all other elements belonging to that Dialog instance. Like so:

```html
<div class="Dialog-root type-alert"> <!-- dialog-1 root element -->
   <div class="Dialog-root type-warning"> <!-- dialog-2 root element -->
      <button class="Dialog-button type-alert">Close dialog-1</button>
      <button class="Dialog-button type-warning">Close dialog-2</button>
   </div>
</div>
```
```css
.Dialog-root.type-alert {
   background-color: red;
}
.Dialog-button.type-alert {
   color: red;
}
```

Whereas with this feature, all elements belonging to one component instance can be tied together with an id, like so:

```html
<div class="Dialog-root type-alert" data-cid="dialog-1">
   <div class="Dialog-root type-warning" data-cid="dialog-2">
      <button class="Dialog-button" data-cid="dialog-1">Close dialog-1</button>
      <button class="Dialog-button" data-cid="dialog-2">Close dialog-2</button>
   </div>
</div>
```
```css
.Dialog-root[:data-cid].type-alert {
   background-color: red;

   .Dialog-button[data-cid=[:data-cid]] {
      color: red;
   }
}
```

This reduces the number of DOM operations needed to update states/variants/modifiers on a component, as it only needs to be done on its root element rather than on all affected elements.


-- 
GitHub Notification of comment by brunostasse
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10567#issuecomment-2227409901 using your GitHub account


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

Received on Sunday, 14 July 2024 16:45:57 UTC