题干与适用场景
这是一道现代 Web 平台与可访问交互题。目标是实现菜单、筛选面板或帮助气泡等非模态浮层；页面其余内容仍可交互，浮层需要由触发器打开并支持 light-dismiss。HTML Popover API 通过 popover 属性、popovertarget 和 top layer 提供浏览器管理的显示生命周期。题目不要求把所有弹层都迁移到原生 API，也不把定位算法本身作为重点。
面试官考察点
- 能否区分
popover="auto"、popover="manual"与 modal dialog 的交互语义。 - 能否让触发按钮、浮层和关闭动作形成可理解的语义关系。
- 能否处理 Escape、外部点击、多个浮层、焦点回退和事件生命周期。
- 能否说明渐进增强、浏览器支持和不破坏页面工作的降级策略。
回答前需要澄清的问题
先确认浮层是否允许用户继续操作背景；若背景必须阻断，应改用 <dialog> 的 showModal()，而不是 popover。再确认浮层是同一时刻只允许一个，还是允许多个手动浮层并存；是否需要点击触发器切换、表单提交后关闭、动画和定位；以及产品的最小浏览器范围。筛选面板通常是非模态，但键盘用户仍需要明确的焦点和关闭路径。
30 秒回答框架
我会优先使用语义 HTML：触发按钮写 popovertarget，浮层写 popover="auto"，需要自定义关闭编排时才使用 manual。浏览器负责 top layer、Escape 和外部 light-dismiss；我补充焦点进入、关闭后的回退、状态文本和 beforetoggle/toggle 生命周期。若浏览器不支持，就用同一 DOM 结构和最小 JavaScript polyfill，避免通过全局点击监听误关其他浮层。
分步骤深入解答
1. 选择 popover 还是 modal dialog
Popover 适合菜单、筛选器、非阻塞帮助和临时操作；它不会把页面变成模态背景。<dialog> 的 showModal() 适合确认、付款或必须先处理的警告，因为它提供模态语义和背景阻断。两者都可以放在 top layer，但可访问名称、焦点策略和关闭原因不同，不能只把 dialog 换成 popover 属性。
2. 建立触发器与浮层关系
最小语义结构可以让浏览器维护目标关系：
<button type="button" popovertarget="filters" aria-controls="filters">
筛选
</button>
<div id="filters" popover="auto">
<form method="get">
<label>状态 <select name="status"><option>全部</option></select></label>
<button type="submit">应用</button>
</form>
</div>popovertarget 让按钮成为声明式触发器，浏览器会在打开与关闭时维护关联状态。aria-controls 可帮助辅助技术理解关系，但不能替代可见名称和正确的焦点行为。复杂组件应在脚本中保存触发器引用，关闭时把焦点还给仍存在且可聚焦的按钮。
3. 理解 auto、manual 与 light-dismiss
auto 浮层支持由浏览器管理的 light-dismiss：按 Escape 或点击浮层外部可关闭，并参与自动关闭链。manual 浮层不会被这些机制自动关闭，必须调用 showPopover()、hidePopover() 或 togglePopover()；适合需要多个浮层并存或自定义生命周期的场景。不要在 auto 模式下再注册 document 级点击关闭，否则嵌套浮层和触发器点击容易产生竞态。
4. 处理 top layer、定位和遮罩
Popover 打开后进入 top layer，不再受普通祖先的 overflow 或 z-index 堆叠上下文限制。可用 CSS Anchor Positioning 或普通布局做定位，但定位失败时应提供静态回退。非模态 popover 不应默认添加覆盖全屏的 backdrop；如果视觉上需要遮罩，应重新确认这是否已经是 dialog 的模态需求。top layer 改变了绘制顺序，却不会自动解决狭窄视口、滚动容器和碰撞定位。
5. 建立焦点和键盘策略
打开后把焦点移到浮层内第一个可操作控件，或保留浏览器默认行为并在实测中确认。Escape 关闭后将焦点还给触发按钮；若触发器被删除，回退到最近的可见上下文。Tab 顺序应自然穿过浮层内容，不能用 tabindex="-1" 把所有控件隐藏。菜单型 popover 还需遵循菜单项的箭头键和选中语义，筛选表单则使用普通表单键盘行为。
6. 监听生命周期而不是全局猜测状态
用 beforetoggle 检查是否允许切换、记录关闭原因或同步应用状态；用 toggle 在实际状态变化后更新按钮文本和焦点。事件处理器应按元素注册并在组件销毁时清理。若多个 auto 浮层互斥，依赖浏览器的自动关闭栈，避免维护一份可能过期的全局 openId。
7. 处理表单提交和状态同步
筛选表单提交成功后可以显式调用 hidePopover()，但不要把关闭当作保存成功的证据。请求失败时保持浮层打开并把错误与表单关联。打开状态是临时 UI 状态，筛选条件是业务状态，两者应分开管理；路由更新或返回历史记录时，按产品需求重新计算，而不是把 :popover-open 当作唯一数据源。
8. 渐进增强和测试
能力检测应针对 HTMLElement.prototype.showPopover 等实际 API。支持时使用原生行为；不支持时保留相同按钮、内容和可访问名称，以小型 polyfill 补齐显示、Escape、外部点击和焦点回退。测试键盘、触摸、缩放、滚动、嵌套浮层、触发器被删除、表单失败和 prefers-reduced-motion。还要用屏幕阅读器确认名称、状态和错误被读出，而不是只检查像素位置。
高质量示范回答
我会把它定义为非模态筛选 popover，而不是 dialog。按钮使用 popovertarget，面板使用 popover="auto"，由浏览器管理 top layer、Escape 和外部 light-dismiss；脚本只负责表单状态、焦点回退和生命周期事件。打开时焦点进入第一个控件，关闭后回到触发按钮；提交失败保持打开并关联错误，成功后才关闭。多个手动浮层才使用 manual，不在 auto 模式下重复注册全局点击监听。定位使用 CSS Anchor Positioning 时提供静态回退，能力检测失败则用同一语义结构的最小 polyfill，并用键盘、触摸、滚动和辅助技术测试。
常见错误
- 用 popover 承载必须阻断背景的确认操作，导致模态语义缺失。
auto模式再加 document 点击监听，误关闭嵌套浮层或提交按钮。- 只改变
display，不维护触发器关系、焦点回退和错误状态。 - 用全屏 backdrop 模拟 dialog，却仍把组件当非模态处理。
- 把 top layer 当作自动定位，忽略滚动、窄视口和碰撞回退。
- 失败时无条件关闭表单，用户看不到错误，也无法继续修正。
- 只在鼠标点击下验证，遗漏 Escape、Tab、触摸和屏幕阅读器。
追问及应对
什么时候必须改用 <dialog>？
当背景内容必须不可交互、用户必须先确认或需要模态焦点循环时，使用 <dialog> 的 showModal()。Popover 的 light-dismiss 和非模态语义无法替代阻断背景、模态说明和明确的取消/确认动作。
如何让多个筛选浮层互斥？
优先让互斥的浮层使用 auto，由浏览器处理自动关闭链。若业务要求多个 manual 浮层并存，维护显式的实例集合，关闭时只操作目标实例，并为每个实例保存自己的触发器和焦点回退。
如何处理不支持 Popover API 的浏览器？
能力检测后使用同一 DOM 和语义属性，polyfill 只补显示、关闭、Escape、外部点击与焦点回退。不要把不支持环境降级成没有名称、没有键盘路径的纯绝对定位 div；也要记录兼容矩阵并在发布前测试。
如何测试 light-dismiss 的边界？
测试点击触发器、浮层内部、外部兄弟元素、滚动容器和另一个 popover；验证内部点击不会关闭，外部点击只关闭符合规则的 auto 浮层，触发器再次点击不会产生双重状态。补充键盘 Escape 与触摸事件测试。
动画会影响可访问性吗？
根据 prefers-reduced-motion 缩短或移除过渡，确保动画期间焦点与可读状态仍一致。不要用透明度隐藏仍可聚焦的控件；关闭动画结束前就应阻止重复提交，并让屏幕阅读器获得稳定的状态变化。
如何处理浮层定位失败？
使用 anchor positioning 时提供默认块流位置或视口内的固定回退，并监听尺寸与滚动变化。定位失败不应让内容溢出屏幕或被裁切；核心表单功能仍需在无定位增强时可操作。