"Popover API 实战：锚定弹出层的无障碍与性能"

概述Popover API 允许在文档中声明式或脚本方式展示弹出层，并支持锚定到触发元素。相比手写层管理，Popover 提供更可靠的焦点与可见性控制。用法与锚定声明式：`<div popover id="tip">内容</div>`；脚本：`document.getElementById('tip').showPopover()`/`hidePopover()`［参考1,2］。锚定：在触发元素上使用 `popoverTargetElement` 或 `anchor` 与 CSS 位置定义，实现相对定位与滚动协作［参考2］。无障碍与样式焦点管理：开启弹出层时将焦点移动到弹出层或其首个可聚焦元素；关闭后返回触发元素。层样式与动画：仅对 `transform/opacity` 动画，避免重排；在 `prefers-reduced-motion` 环境降级动效。工程建议统一弹出层组件封装，处理关闭条件（点击外部、Esc 键、滚动等）。与 `inert`、`aria-` 属性协作，确保可达性与键盘导航正确。参考与验证［参考1］MDN 英文：Popover API 概览与 `showPopover/hidePopover` 用法：https://developer.mozilla.org/en-US/docs/Web/API/Popover_API［参考2］web.dev：Popover API 指南与锚定示例与无障碍说明：https://web.dev/articles/popover-api关键词校验关键词与 Popover API 锚定与无障碍一致。