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.

[Sparkmasterflex]

Bam! that worked thank you

[hexcowboy]

@nmn is this going to be supported at some point? it feels strange to use a pattern that is not recommended. it also seems standard for headless ui libraries to use data attributes for state.

for others stumbling upon this - discussion #509 was helpful specifically for react-aria

[nmn]

it feels strange to use a pattern that is not recommended.

The headless ui libraries are using this pattern so we can't help it. Using :is() as a workaround is the current recommendation. It is a workaround, but the correct solution would depend on changes to component libraries.

The reason against attribute selectors is that they increase the amount of CSS needed for no reason. These component libraries are using JS to set attributes anyway. They could instead set classNames conditionally instead.