Allow triggering of native pseudo-classes for development purposes

[justinfagnani]

Browser devtools allow us to trigger native pseudo-classes like :focus or :invalid. This is great to have, but there are cases where we can't expect a user to open devtools.

A big use case is component catalogs and stories: designers and developers may need a page may need to show a component in many different states (ie, hovered, focused, invalid, etc.). If the component is only styled with pseudo-classes, this becomes impossible. To workaround this, any selector that uses a pseudoclass must also use a class or attribute to emulate the pseduo-class for stories. This is easier now with :is() and :where(), but it's cumbersome and leads to a little bloat.

It would be extremely useful to have some way to trigger pseudo-classes directly. Just an idea, but maybe it could be done via CSS:

/* Select the element in the story */
#hover-disabled-story my-element {
  enabled-pseudo-classes: hover disabled
}

[JReinhold]

Another similar use case, is when writing UI tests executed in the browser using JS APIs. Usually this is done with the Testing Library suite, but there are other ways of course. Users will use @testing-library/user-event to simulate interactions - such as click and type - directly in the browser. Over the years I've probably had 30+ conversations with users that expected userEvent.hover() to enable the hover style on the element, having to explain them that it doesn't because there is no browser API that would allow that to work.

A few years ago this wasn't a big problem because testing was done in a simulated JSDOM environment, but today we're seeing more and more of these tests running directly in an actual browser instead, which is a lot more useful.

I'd personally expect the use cases for this to be primarily based around JS flows, but a CSS API like proposed above would be pretty easy to use in JS too.

I think a lot of users would benefit from this being solved, let me know if there's any way I can help making this happen.

(Full disclosure: I'm a core maintainer of Storybook, where this issue comes up a lot)

[justinfagnani]

I'd personally expect the use cases for this to be primarily based around JS flows

I think a fair number will, but I also think it would be great to set up an example of how some markup will look under various conditions completely declaratively without JS.

[AtkinsSJ]

Giving web authors the ability to fake states so easily sounds problematic to me, but I don't actually have any examples.

On a technical side, how do we prevent cycles like this:

:not(:hover) {
    enabled-pseudo-classes: hover;
}

[tabatkins]

Yeah, doing this via CSS is inherently cyclic and wouldn't work. This sounds like a JS API, vaguely similar to WebDriver.