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

# 概述 Popover API 允许在文档中声明式或脚本方式展示弹出层，并支持锚定到触发元素。相比手写层管理，Popover 提供更可靠的焦点与可见性控制。 # 用法与锚定 - 声明式：`

`；脚本：`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 锚定与无障碍一致。