HTML Popover API 原生实现浮层交互，无需 JavaScript

在开发复杂浮层组件时，开发者常面临维护大量 JavaScript 代码的挑战。例如，一个下拉菜单不仅要处理展开收起，还需管理焦点、无障碍访问（Accessibility）以及 z-index 层级冲突。移动端 ESC 键退出逻辑和点击空白处关闭功能往往需要编写冗余代码。

HTML Popover API 已在 Chrome、Firefox、Safari 和 Edge 中实现了广泛的跨浏览器支持（Baseline Widely Available）。这意味着可以使用纯原生、声明式的 HTML 属性轻松创建浮层、提示框、菜单和对话框，而无需编写 JavaScript。

与 JS 组件库对比

传统方式需要手动处理定位、监听外部点击、焦点捕获及 ARIA 属性：

const button = document.querySelector('.trigger');
const popover = document.querySelector('.popover');
let isOpen = false;
button.addEventListener('click', () => {
  isOpen = !isOpen;
  popover.style.display = isOpen ? 'block' : 'none';
  if (isOpen) {
    popover.setAttribute('aria-hidden', 'false');
    // 需手写焦点捕获...
    // 需加点击外部关闭监听...
  }
});

使用 Popover API 仅需几行 HTML：

<button popovertarget="menu">点我打开</button>
<div id="menu" popover>
  <p>菜单内容就在这儿</p>
</div>

浏览器自动接管以下功能：

• 顶层渲染（Top Layer）：无视 z-index，显示在最上层。