Top layer troubles: popover vs dialog

Graphic titled “Top layer troubles: popover vs. dialog”, showing a modal labeled “This is a native modal dialog” with text about a toast notification, a “Focus target” button, and a banner saying “Oops! An error occurred! Retry”.

Stephanie Eckles opens this year’s HTMHell Advent Calendar with a peculiar case: a toast notifications promoted to the top layer with the Popover API can appear above a modal dialog yet stay inert. How showModal() makes background popovers unreachable and how to fix it by moving toasts into the dialog DOM and using popover="manual".

htmhell.dev/adventcalendar/2025/1

Tags a11y css dialog html popover