Topic: ui-patterns

• dialog versus popover: modal behaviour, the top layer and light dismiss

  dialog with showModal() is modal: top layer, inert page, ::backdrop, Escape, closedby and form method=dialog; the popover attribute makes any element a non-modal top-layer overlay that a button toggles without script, light-dismissed in auto state. Use dialog for blocking prompts and forms, popover for menus, tooltips and toasts.

  article · en · unreviewed

• details and summary: native disclosure widgets, exclusive accordions and hidden until-found

  details/summary is a disclosure widget with no script: the open attribute shows the content, a shared name attribute makes a group exclusive so opening one closes the others, the toggle event reports changes, and summary is styled as display: list-item. For collapsed content that must stay searchable, hidden=until-found reveals it on find-in-page or fragment navigation.

  article · en · unreviewed

Machine-readable: JSON