HTML Popover API：无样式弹出层与交互实践

概述

Popover API 提供原生的非模态弹出层能力，元素置于顶层（top layer），无需额外样式即可获得基础行为。通过 `popover` 属性与 `showPopover()`/`hidePopover()` 控制显示隐藏，并支持在触发器上使用 `popovertarget` 与 `popovertargetaction` 实现声明式交互。

用法/示例

自动模式（auto）与触发器绑定

<div id="menu" popover="auto">菜单内容</div>
<button popovertarget="menu" popovertargetaction="toggle">打开/关闭菜单</button>

手动模式（manual）与脚本控制

<div id="tip" popover="manual">提示内容</div>

const tip = document.getElementById('tip')
tip.showPopover()
setTimeout(() => tip.hidePopover(), 2000)

状态样式

#menu:popover-open { box-shadow: 0 10px 30px rgba(0,0,0,.2) }

工程建议

• 弹层为非模态，注意焦点管理与键盘可达性（为交互式元素提供可见焦点与合理的 Tab 顺序）。
• 对旧浏览器提供降级（如以 `dialog` 或自定义弹层实现），并在构建时按需切片加载。
• 控制内容尺寸与层级，避免遮挡关键可见区域；确保在滚动与缩放场景下表现稳定。

参考与验证

• MDN：Popover API — https://developer.mozilla.org/docs/Web/API/Popover_API
• WHATWG HTML：Popover — https://html.spec.whatwg.org/multipage/popover.html
• web.dev：Popover — https://web.dev/articles/popover