Re: [csswg-drafts] [selectors-4] Introduce `:popover` pseudo class (#8637)

> 1. I cannot intercept and cancel (`event.preventDefault()`) the toggle event to rely on the consumer of my component changing the `open` property; the most I can do is let the consumer know that the popover was closed.

Right, this is by design, to avoid a slew of footguns. Sounds like you have a way to make your application work, which is good.

> 2. Popovers can be light-dismissed by a user action (clicking outside or pressing the Escape key), so I need to first check if the popover is still visible before attempting to call `.hidePopover();`, because trying to hide an already-hidden popover generates a warning.

You could also use the `toggle` event to keep track of the state, if you like.

> I can easily achieve this with `const isVisible = dialogRef.matches(':popover-open');`, and it works like a charm, but testing environments still don't recognize this `:popover-open` pseudo class

It's landed in browsers, so I'm not sure why testing environments wouldn't have it.

> 
> ```js
> const isVisible = getComputedStyle(dialogRef).getPropertyValue('display') === 'block'
> ```

Note that this is a bit brittle, since you can set `display:whatever` on the dialog manually.

> I see that, as @annevk mentioned, this was already merged to the HTML side, but I can't find if there's been any update on this side

Right, this is [part of the HTML spec](https://html.spec.whatwg.org/#selector-popover-open), but doesn't appear yet in [the selectors spec](https://www.w3.org/TR/selectors-4/). @tabatkins @fantasai is it easy (and appropriate) to get `:popover-open` added to the CSS spec?

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


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

Received on Friday, 5 April 2024 23:41:56 UTC