Modal
A dialog surface built on the native <dialog>
element. The snippet is now fully HTML-only, using declarative invoker
attributes to open the modal and closedby="any" for light
dismiss.
Using It Today
This component ships as a styled <dialog> surface,
including native close handling through method="dialog",
a declarative opener using command="show-modal" plus
commandfor, and light dismiss via
closedby="any".
Centering is handled in CSS with margin: auto and
inset: 0 on the dialog, so the component stays visually
balanced without any extra wrapper logic.
This is the cleanest implementation in the library because it removes inline JavaScript entirely and keeps the component fully declarative.
Browser Compatibility
| Feature | Chrome | Edge | Firefox | Safari | Notes | Source |
|---|---|---|---|---|---|---|
<dialog>
Broad support
|
37+ | 79+ | 98+ | 15.4+ |
Covers the dialog element itself, including non-modal rendering
with the open attribute.
|
caniuse |
command + commandfor
Limited support
|
135+ | 135+ | 144+ | 26.2+ |
Declarative invoker commands replace the old inline
showModal() opener.
|
caniuse |
closedby="any"
Limited support
|
134+ | 134+ | 141+ | No | Enables light dismiss so clicks outside the modal close it without JavaScript. Limited availability across major browsers. | caniuse |