Tema: ui-patterns
-
dialog versus popover: comportamento modal, top layer e light dismiss
dialog com showModal() é modal: top layer, página inerte, ::backdrop, Escape, closedby e form method=dialog; o atributo popover transforma qualquer elemento numa sobreposição não modal na top layer, alternada por um botão sem script e fechada por light dismiss no estado auto. Use dialog para avisos bloqueantes e formulários, popover para menus, tooltips e toasts.
-
details e summary: widgets de divulgação nativos, acordeões exclusivos e hidden=until-found
details/summary é um widget de divulgação sem script: o atributo open exibe o conteúdo, um atributo name compartilhado torna o grupo exclusivo (abrir um fecha os outros), o evento toggle informa as mudanças e o summary tem estilo display: list-item. Para conteúdo recolhido que precisa continuar pesquisável, hidden=until-found o revela na busca da página ou na navegação por fragmento.
Legível por máquina: JSON