And also <details> if you need expanding/collapsing content, or, with a slight abuse, a "dropdown".
Strange that unlike <dialog open> and <details open>, `<whatever popover>` apparently lacks the the ability to be made declaratively `open` using the attribute. This feels like omission to me. I hope there is some based reasoning behind this decision.
Maybe because 'dialog' says "don't do that" but everybody did anyway?
(also possibly because the "insert into top layer" is sufficiently odd a thing to trigger that the designers felt representing it as an attribute was a worse idea than for dialog)
... though I'd really like some sort of explanation as to how to choose between "non-modal <dialog>" and popover because the one thing I am very confident of here is that I don't know enough to answer that question myself.
As I understand the line of thought around modals there it is: If it has to be declaratively opened modal on each page visit, blocking other content, it should better be an extra page anyway. (The fact it is made possible imperatively with JS is considered "necessary evil" as I understand it.) The same presumably applies for popover; default-open popover could probably make sense in application that uses JS anyway, not a static document. (?)
Nuances of distinction between popover and non-modal dialog I have to explore.
I'd warn that there's a fair bit of work you have to do to get animations and typical modal behavior working up to the level of modern day expectations. It's completely surmountable but also quite non-trivial.
I don't agree as I have converted all the modals/dialog in my web app to <dialog> and boy it has been a breeze. A few killer features:
- Goodbye z-index, since the last opened dialog always get's promoted to the top in #top-layer [1]
- Free focus handling, it doesn't trap focus inside dialog but that's kinda opinionated anyway [2]
- styling and animation is EASY with `@starting-style` and `allow-discrete` and can even use view-transitions [3]
Here's a basic sliding in drawer with blurred background I have in svelte:
Some of the features are not yet available in firefox and safari but they are coming soon and they have minimal workarounds available now [4] for animating `display: none` etc. So, I'd say it's time we retire that quirky UI library's dialog.
As someone pointed out, it's indeed harder to animate but it's fully accessible, supports escape key to close, has a built-in backdrop and has built-in focus trap.
Safari took a while to support it but now it's available everywhere. I think it's better than using a <div> tag.
Apparently it's unsupported in the Firefox ESR version in Ubuntu 20.04, which still receives support from Canonical until 2025. I found that out because someone reported that my site didn't work.
<dialog> has been supported since Firefox 98, meaning ESR 91 was the last release lacking it, and it reached end of support over a year and a half ago.
