HTML最新原生弹出层机制，popover属性有何独特用途？

本文共计991个文字，预计阅读时间需要4分钟。

它仅是一个实验性全局属性，Chrome/Edge 114+ 才支持，Safari 和 Firefox 当前完全不支持。

真正起作用的前提有三个：一个带 popover="manual" 的容器元素（必须是 <div> 这类非交互元素）、一个独立触发元素（比如 <button>），以及至少一次 showPopover() 调用。缺一不可。

• popover="auto" 容易导致意外自动显示，推荐统一用 popover="manual"
• 容器不能是 <button>、<a> 等可聚焦/可交互元素，否则浏览器会忽略
• 调用 showPopover() 前必须确保 DOM 已就绪，否则报 Cannot read property 'showPopover' of null

dialog 元素才是稳定可用的原生弹窗方案

<dialog> 是 HTML 标准里真正落地的弹窗标签，Chrome 37+、Firefox 98+、Edge 79+、Safari 15.4+ 都已支持。它不依赖实验性特性，行为明确，语义清晰。

关键点在于：<dialog> 默认隐藏，必须显式调用 showModal() 或 show() 才可见。只写 HTML 结构却不调 JS 方法，页面上永远看不到它。