The getComputedStyle API currently only allows a user to get the current computed state, leaving much-to desired should the author want to probe for a specific state such the :hover state or :focus-within.
Use Cases (Recommended)
At present you need special privilege(as an extensions or debug session) to get the pseudo states of an element i.e the CSS.forcepseudostate API currently present in Chrome that dev tools and other debug applications use to toggle programmatically between an elements pseudo states.
Goals (Optional)
An API to be able to force an element into a particular state programmatically.
And or the ability to the computed styles of a particular state getComputedStyle(node, ":hover").
Non-goals (Optional)
It is not a goal to allow any arbitrary state, just the standard i.e :active, :focus, :focus-within, :focus-visible, :hover.
Proposed Solution
Just as getComputedStyle accepts a second parameter for a pseudo element getComputedStyle(node, "::before"), the same could be extended to accept getComputedStyle(node, ":hover") for the introspection of psuedo states.
CSS.forcePseudoState(":hover") to force an element into a particular psuedo state.
Examples (Recommended)
Chrome Developer Tools has the ability to force :hover, :focus states of an element to preview the styles that are applied when those states are active.
Alternate Approaches (Optional)
Currently there's no way to get the hover state without establishing control of both sides, that is both the provider(author) and consumers(the tool trying to introspect) i.e in using a div.hover, div:hover class in addition to a :hover state and managing the mouseenter state to trigger the class.
Privacy & Security Considerations
The :visited state, but those issue have been tackled in previous introspections of its use and issues. The same mitigations would apply in this case.
Let’s Discuss (Optional)
Should allowance be made for custom states forcePseudoState(":walking") that can be toggled.
Introduction
The
getComputedStyleAPI currently only allows a user to get the current computed state, leaving much-to desired should the author want to probe for a specific state such the:hoverstate or:focus-within.Use Cases (Recommended)
At present you need special privilege(as an extensions or debug session) to get the pseudo states of an element i.e the
CSS.forcepseudostateAPI currently present inChromethat dev tools and other debug applications use to toggle programmatically between an elements pseudo states.Goals (Optional)
getComputedStyle(node, ":hover").Non-goals (Optional)
:active, :focus, :focus-within, :focus-visible, :hover.Proposed Solution
Just as
getComputedStyleaccepts a second parameter for a pseudo elementgetComputedStyle(node, "::before"), the same could be extended to acceptgetComputedStyle(node, ":hover")for the introspection of psuedo states.CSS.forcePseudoState(":hover")to force an element into a particular psuedo state.Examples (Recommended)
Chrome Developer Tools has the ability to force
:hover,:focusstates of an element to preview the styles that are applied when those states are active.Alternate Approaches (Optional)
Currently there's no way to get the hover state without establishing control of both sides, that is both the provider(author) and consumers(the tool trying to introspect) i.e in using a
div.hover, div:hoverclass in addition to a:hoverstate and managing themouseenterstate to trigger the class.Privacy & Security Considerations
The
:visitedstate, but those issue have been tackled in previous introspections of its use and issues. The same mitigations would apply in this case.Let’s Discuss (Optional)
Should allowance be made for custom states
forcePseudoState(":walking")that can be toggled.