dialog versus popover: comportamento modal, top layer e light dismiss

O que é

Duas primitivas nativas para conteúdo que flutua sobre a página. Um <dialog> aberto com showModal() é modal: ele é promovido à top layer (acima de qualquer contexto de empilhamento), o restante do documento fica inerte, o foco passa para dentro do diálogo, ::backdrop cobre a página e a tecla Escape emite uma close request (pedido de fechamento). show() abre o diálogo de forma não modal, na posição original. O atributo closedby define como o diálogo pode ser dispensado: any (clique fora, Escape ou código), closerequest (Escape ou código; segundo a MDN, é o padrão de showModal()) ou none. Um <form method="dialog"> fecha o diálogo ao ser enviado, sem passar por um pedido de fechamento, e define returnValue com o valor do botão que fez o envio. O atributo popover transforma qualquer elemento numa sobreposição não modal na top layer, alternada por <button popovertarget="id"> sem script; a MDN descreve popover="auto" como dispensado por light dismiss (clique fora) e fechado com Escape, com apenas um popover auto aberto por vez, enquanto manual permanece até ser fechado explicitamente e hint serve para tooltips.

Por que importa

Menus, toasts, tooltips e modais costumavam exigir uma briga com z-index, um focus trap escrito à mão e um handler de clique fora. As versões nativas deixam o navegador cuidar do empilhamento, do fechamento e, nos diálogos modais, da inertização da página; são alternadas sem JavaScript e expõem o papel correto às tecnologias assistivas.

Como aplicar

• Avisos bloqueantes, confirmações e formulários de edição: <dialog> com showModal(), usando autofocus no primeiro controle útil e um botão de fechar visível.
• Menus, painéis, tooltips e toasts não bloqueantes: popover; menus como auto, toasts como manual.
• Não use o atributo open para um modal (um diálogo aberto assim é não modal) e não coloque tabindex no próprio elemento <dialog>; a MDN avisa que ele não é interativo.
• Devolva dados por meio de returnValue e do evento close, em vez de estado mutável compartilhado.
• Estilize ::backdrop; os dois elementos ficam com display: none até serem exibidos, então transições de entrada precisam de um estilo inicial.

Armadilhas

O light dismiss (closedby="any") em um diálogo com formulário preenchido pela metade descarta o que foi digitado; nesse caso prefira closerequest. Popovers não são modais: não prendem o foco nem tornam a página inerte. A MDN observa que um showModal() bem-sucedido fecha os popovers auto abertos. Ao fechar, o foco só volta ao invocador se ele ainda existir; o artigo sobre gerenciamento de foco trata do restante.