svelte-ux
svelte-ux copied to clipboard
[Dialog] Consider using <dialog> element or popover API
The new dialog element has improved accessibility including focus trapper (if opened as a modal), and the browser support is good.
There are a few questions to answer:
- Can we still transition using
.show()
/.showModal()
.- Might not be able to use svelte transition, but css transitions/animations.
- No way to fade out backdrop on close (
::backdrop
element immediately removed) - It looks like we can pass the
open
prop instead of the using the DOM api, which would then allow svelte transitions, but I don't think you can open it as a model, and thus no::backdrop
, focus trapping, etc.
- Do we use the built in
::backdrop
pseudo element instead of using Backdrop - Clicking the backdrop / outside the dialog does not appear to be supported (still use Backdrop component?)
- Scrolling while modal dialog is open is not restricted
-
Safari support is
15.4+
Sadly, this doesn't appear to help any with portal-ing, stacking context (z-index, CSS inheritance, etc)
REPL experimentation