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

Hi @mfreed7 

I have a working scenario where I need this pseudo class and is also related to [your comment](https://github.com/whatwg/html/issues/8973#issuecomment-1452663412) about the toggle events not being cancelable when hiding popovers.

I created a React component to encapsulate a popover and I need it to be descriptively controlled instead of imperatively.

My Popover component receives an `open` property, renders a 

```jsx
<dialog popover="auto" ref={dialogRef}>{children}</dialog>
```

and shows (`dialogRef.showPopover()`) or hides (`dialogRef.hidePopover()`) the popover based on the `open` property.

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.

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.

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 so I'm forced to check the display value instead:

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

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

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


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

Received on Tuesday, 2 April 2024 19:52:03 UTC