As mentioned in the HTML section, the script works fine with the native HTML
<dialog> element and will polyfill its behaviour so the dialog works in any browser, regardless of their support for that HTML element. However, it is recommended not to use it and to rely on a
role="dialog" instead. Amongst other, here are the issues with the HTML
- Clicking the backdrop does not close the dialog on Chrome.
- The native
::backdroponly shows when programatically opening the dialog, not when using the
- Default styles are left to the browsers’ discretion and can be inconsistent.
- The alert dialog pattern (
role="alertdialog") simply does not work with the dialog element.
- Read more about the shortcoming of the dialog element by Scott O'hara.
If you really want to use the
<dialog> HTML element nevertheless, here are a few things you should know.
The provided base styles will not quite work because the dialog container does not receive the
aria-hidden attribute when hidden. That is because the dialog’s visibility is handled by the user-agent itself. This means the container is essentially always displayed. For that reason, it should not made fixed on top of everything, otherwise it prevents interacting with the page at all.
Fortunately, the library adds a
data-a11y-dialog-native attribute (with no value) when the
<dialog> element is used and natively supported. This attribute can be used to customise the styling layer based on user-agent support (or lack thereof).
The following styles are more suited to using
<dialog> element is used and natively supported, the argument passed to
hide() is being passed to the native call to
close(). If necessary, the
returnValue can be read using