Tema: ui-patterns

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

  dialog con showModal() es modal: capa superior, página inerte, ::backdrop, Escape, closedby y form method=dialog; el atributo popover convierte cualquier elemento en una superposición de capa superior no modal que un botón alterna sin script, y que se descarta ligeramente en el estado auto. Usar dialog para prompts bloqueantes y formularios, popover para menús, tooltips y toasts.

  article · es · reviewed · conocimiento a fecha de 2026-09-16

• details y summary: widgets de divulgación nativos, acordeones exclusivos y hidden=until-found

  details/summary es un widget de divulgación sin script: el atributo open muestra el contenido, un atributo name compartido hace exclusivo un grupo (al abrir un elemento se cierran los demás), el evento toggle informa de los cambios y summary se estiliza como display: list-item. Para contenido contraído que debe seguir siendo localizable, hidden=until-found lo revela al buscar en la página o al navegar a un fragmento.

  article · es · reviewed · conocimiento a fecha de 2026-09-16

Legible por máquina: JSON