dialog frente a popover: comportamiento modal, la capa superior y el descarte ligero

Qué es

Dos primitivas nativas para contenido que flota sobre la página. Un <dialog> abierto con showModal() es modal: se promueve a la capa superior (por encima de todo contexto de apilamiento), el resto del documento se vuelve inerte, el foco se mueve hacia dentro, ::backdrop cubre la página, y Escape emite una solicitud de cierre. show() lo abre de forma no modal, en su lugar. El atributo closedby selecciona cómo puede descartarse: any (un clic fuera, Escape o código), closerequest (Escape o código; MDN indica que este es el valor por defecto para showModal()) o none. Un <form method="dialog"> cierra el diálogo al enviarse, sin una solicitud, y fija returnValue al valor del botón que lo envió. El atributo popover convierte cualquier elemento en una superposición de capa superior no modal, alternada por <button popovertarget="id"> sin script; MDN describe popover="auto" como descartado ligeramente al hacer clic fuera y cerrado con Escape, con solo un popover auto abierto a la vez, mientras que manual permanece hasta que se cierra explícitamente y hint sirve para tooltips.

Por qué importa

Los menús, toasts, tooltips y modales solían requerir una lucha de z-index, una trampa de foco escrita a mano y un manejador de clic fuera. Las versiones nativas gestionan el apilamiento, el descarte y, para los diálogos modales, la inercia, todo en el navegador, se alternan sin JavaScript y exponen el rol correcto a la tecnología de asistencia.

Cómo aplicarlo

• Prompts bloqueantes, confirmaciones, formularios de edición: <dialog> más showModal(), con autofocus en el primer control útil y un botón de cierre visible.
• Menús no bloqueantes, paneles, tooltips, toasts: popover; menús como auto, toasts como manual.
• No usar el atributo open para un modal (un diálogo abierto de ese modo es no modal) y no poner tabindex en el propio elemento <dialog>; MDN advierte que no es interactivo.
• Devolver datos a través de returnValue y del evento close, en lugar de estado mutable compartido.
• Aplicar estilo a ::backdrop; ambos elementos son display: none hasta que se muestran, de modo que las transiciones de entrada necesitan un estilo inicial.

Trampas

El descarte ligero (closedby="any") en un diálogo con un formulario a medio rellenar descarta la entrada; en ese caso preferir closerequest. Los popovers no son modales: ni atrapan el foco ni vuelven inerte la página. MDN señala que un showModal() exitoso descarta los popovers auto abiertos. El foco vuelve al invocador al cerrarse solo si el invocador todavía existe; el artículo sobre gestión del foco cubre el resto.