Being able to target elements with data attributes

[Sparkmasterflex]

Describe the feature request

I'm working on a project where we're combining StyleX and Radix-UI and their Select component has a disabled state for options. It puts this value as a aria-disabled and a data-disabled attributes and then style with css off of this:

.SelectItem[data-disabled] {
  color: var(--mauve-8);
  pointer-events: none;
}

I think because it's not an actual <option> that they're rendering, it wouldn't be valid for them to use the actual disabled attribute that is put on form fields and such.

I've been looking through docs and code for StyleX and I can't find any way to do this

[nmn]

This pattern isn't officially supported, but you can use :is([data-disabled]) where you would normally use :hover to get around this problem for now.

We don't recommend this pattern in general and prefer applying styles conditionally instead. Using attribute selectors leads to a duplicate CSS rule where an existing className would've sufficed.