HTML Popover API 怎样处理嵌套弹层与焦点

做多级菜单时，最容易踩的坑不是定位，而是“打开第二层后第一层应该不应该消失”和“按 Esc 之后焦点回到哪里”。HTML Popover API 已经把这两件事放进浏览器的弹层栈与 invoker 关系里：普通菜单优先用 popover="auto"，真正需要多个互不影响的浮层再用 popover="manual"，子菜单要建立明确的嵌套关系。

规范入口：https://html.spec.whatwg.org/multipage/popover.html

先把“嵌套”定义成关系，而不是层级数字

Popover API 的 auto 并不是“永远只能打开一个”。当子弹层是父弹层的 DOM 后代、由父弹层里的控制元素调用，或通过 anchor 建立关系时，浏览器可以把它们视为嵌套弹层。这样打开子菜单不会把父菜单立即 light dismiss。

相反，两个没有关系的 auto 弹层通常会互相关闭。不要把两个并列菜单都写成 auto，然后试图用更大的 z-index 修复；这只改变绘制顺序，不能改变弹层栈和焦点关系。

用 auto 做菜单，用 manual 做独立浮层

一个导航菜单和它的子菜单可以先从声明式 HTML 开始。空的 popover 等价于 auto，显式写出状态更利于维护：

  产品


  开发工具
  

    文档
    示例
  


保存完成

这里的菜单依靠 popovertarget 形成 invoker 关系，点击外部或按 Esc 可以关闭 auto 弹层。保存提示则用 manual，多个提示可以同时存在，但关闭、超时和清理都由业务代码负责。Popover 始终是非模态的；如果页面必须阻止背景交互，应考虑

焦点路径要用 autofocus、source 和 toggle 补齐

当按钮通过 popovertarget 打开弹层时，弹层里的可聚焦元素会进入键盘导航顺序，键盘关闭通常会把焦点送回 invoker。菜单的第一个项目可以加 autofocus，但箭头键循环、选择后的父子菜单收拢仍需要自己的交互逻辑。

const menu = document.querySelector("#detail-menu");
const trigger = document.querySelector("#products");

menu.addEventListener("toggle", (event) => {
  // 只在弹层真正显示后设置一次业务状态，避免在切换过程中再次 show/hide。
  if (event.newState === "open") {
    menu.querySelector("a")?.focus();
  }
});

function showFrom(button, popover) {
  // source 让浏览器知道本次打开来自哪个控件，焦点顺序更稳定。
  if (!popover.matches(":popover-open")) {
    popover.showPopover({ source: button });
  }
}

trigger.addEventListener("click", () => showFrom(trigger, menu));

不要在 beforetoggle 里同步打开另一个 popover；当浏览器正在显示或隐藏其他弹层时，这类嵌套调用可能抛出 InvalidStateError。需要联动时，监听 toggle 或把动作排到下一个任务中，并先用 :popover-open 判断当前状态。

上线前用这张清单检查边界

样式层可以用 :popover-open 标记显示态，定位再结合 CSS anchor positioning。兼容性不足时，先保证按钮仍能访问核心链接，再补视觉定位；不要把 JavaScript 点击监听、全屏遮罩和焦点陷阱一次性复制进所有页面。

常见问题

为什么两个 auto 弹层不能同时显示？

它们没有被浏览器识别为嵌套关系。检查 DOM 后代、invoker 所在位置或 anchor 关系；若本来就互相独立，改用 manual。

Popover 能替代模态确认框吗？

不能直接替代。Popover 不会阻止背景交互，确认、提交或危险操作需要模态语义时应使用 dialog。

手动调用 showPopover 后焦点不稳定怎么办？

传入 source 建立来源，并在 toggle 后将焦点放到明确的首个控件；关闭时保存并恢复业务上真正的触发按钮。