Re: [csswg-drafts] [selectors] Declarative custom `:state()` states (#12502)

@bkardell 
> you can still see it at [web.archive.org/web/20140320013932/https://tabatkins.github.io/specs/css-aliases#custom-selectors](https://web.archive.org/web/20140320013932/https://tabatkins.github.io/specs/css-aliases/#custom-selectors)).

Out of curiosity, why the archive.org link? The draft is still up, you can just go see it at <https://tabatkins.github.io/specs/css-aliases/#custom-selectors>.

@LeaVerou 

I get the argument you're making about having less distinct syntaxes for this sort of custom selector, but I agree with @knowler in <https://github.com/w3c/csswg-drafts/issues/12502#issuecomment-3097047503>: this conflates "information from inside a custom element" with other things, in a way that I think can be confusing.

Part of the reason we added `:state()` in the first place was to let custom elements avoid messing with the class attribute on the host element, as we wanted to leave that for the outer page to use instead. We both didn't want custom elements to accidentally clobber the page's classes thru careless mutation, and also didn't want to force a custom element to use ugly uniquified names just to avoid accidentally matching a class the outer page is using for other purposes and getting wrongly styled. Your suggestion to use :state() here would bring back that latter concern - if your page is already using `:state(heading)` as a way to select h1/etc, and you start using a new custom element that happens to use a heading state as well, you'll automatically match that custom element as well, with no way to avoid that. You'd have to either change your existing alias name across your stylesheets, or edit the component to use a different state name.

I think we should stick with just doing custom pseudo-classes a la my personal proposal. If you do want your `:--heading` pseudo to also match `:state(heading)`, you can easily do that by just adding `:state(heading)` to the selector it's defined with:

```css
@custom-selector :--heading h1, h2 h3, h4, h5, h6, [role=heading], :state(heading);
```

Or even further restrict it to just the particular custom element name you know you want. But if you don't, you can just not do that.

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


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

Received on Thursday, 24 July 2025 16:52:38 UTC