You can use
[popover], ::backdrop {
transition:
display 200ms allow-discrete
}

That’s true. In my mind browsing a site’s navigation shouldn’t be focus trapping, but if you absolutely need that perhaps a dialog is better suited.

Popover doesn’t trap the focus and it doesn’t close when the focus leave the popover when using the keyboard.

This feature isn’t available in Safari or Firefox yet. I was able to create a polyfill for Firefox which I wrote about here if you’re interested: https://knowler.dev/blog/polyfilling-hidden-until-found

I don’t think the polyfill is really worth using though.

I had a poke a while ago and couldn’t get the closing ones right. I have gotten it to work for dialogs https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/ but not popovers yet. I suspect there is a way though.

Thanks for the great post,

Seems to be working only in Chrome for now, Safari and Firefox are not finding the words properly. Good feature though!

a line like this isn’t standard JavaScript

is not technically correct. It is perfectly fine, standards-compliant JavaScript.

Before import maps, it would be an erroneous import in a browser, but other JS runtimes are free to determine its meaning (as Node, Deno, etc. did).

Just kidding they totally aren’t.

Joy excitedly rising only a split second later to be dashed upon the rocks of disappointment.