| 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: <style>
dialog::backdrop {
backdrop-filter: blur(4px);
} /* IS-OPEN STATE /
dialog[open] {
translate: 0 0;
} / EXIT STATE /
dialog {
transition:
translate 0.2s ease-out,
overlay 0.2s ease-out,
display 0.2s ease-out allow-discrete;
translate: 384px 0;
} / 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 384px 0;
}
}
</style>
``` 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. [1] https://developer.chrome.com/blog/what-is-the-top-layer
[2] https://github.com/whatwg/html/issues/8339
[3] https://developer.chrome.com/blog/entry-exit-animations
[4] https://codepen.io/kevinpowell/pen/QWaBeGm |