原生popover属性非html标准，仅为chromium 114+/safari 17.4+实验性ua实现，互不兼容；其行为由浏览器硬编码驱动，不触发渲染管线变更，仅作标记位解析。
原生 popover 属性没有“底层实现”可言——它不是 HTML 标准的一部分，而是 Chromium（Chrome/Edge 114+）和 Safari 17.4+ 的实验性 UA 实现，且两套机制互不兼容、无统一规范。你写的 popover 不会触发任何渲染管线变更，只在特定浏览器中被解析为一个标记位，后续行为完全由 UA 内部逻辑驱动。
popover="manual" 模式下 showPopover() 怎么走通的？
这不是 DOM 方法调用后“打开弹层”，而是浏览器在调用瞬间执行一连串硬编码判定：
- 检查元素是否满足：有
id、popover="manual"、非可聚焦元素（如不能是<button></button>或<input>），否则抛DOMException - 检查
"showPopover" in HTMLElement.prototype是否为true；Safari/Firefox 直接报TypeError，不 fallback - 若通过，UA 强制将该元素设为
position: fixed、inset: 0、contain: layout style paint，再根据锚点（如有anchor属性）计算位置 - **关键点**：不支持
anchor属性时，它默认居中显示，且无法通过 CSS 覆盖inset—— 这不是 bug，是 UA 硬编码行为
popovertarget 触发为什么有时完全没反应？
这不是 JS 绑定失败，而是 HTML 解析阶段就已失效。Chromium 和 Safari 对该机制的处理差异极大：
- 目标元素（带
popover）必须在首次 HTML 解析完成时就存在于 DOM 中；用innerHTML或append()动态插入后加属性，Safari 17.4+ 直接忽略 -
popovertarget值必须严格匹配目标id，且id只能含字母、数字、-、_；popovertarget="tip-1"对应<div id="tip-1" popover>，写成 <code>class="tip-1"或data-id="tip-1"都无效 - 触发元素必须是可激活元素（
<button></button>、<input type="button">、<a href></a>），<div popovertarget="x"> 在所有浏览器中均被静默丢弃 <li>目标元素若自带 <code>display: block或position: absolute，会与 UA 注入的position: fixed冲突，导致不可见或定位错乱 - 点击空白处触发关闭 →
beforetoggle立即触发，opened: false，但此时内容已开始隐藏，无法插入保存逻辑 - 调用
hidePopover()→ 同样触发beforetoggle，但无法阻止执行，也无法知道触发源是按钮还是 Esc 键 - 嵌套 popover 时，多个
beforetoggle触发顺序未定义，Chrome 125 下常漏发最外层事件 - 想做关闭前动作（如表单校验、草稿保存），唯一可靠方式是：在自定义关闭按钮里先跑业务逻辑，再调
hidePopover() -
<dialog></dialog>是标准 HTML 元素，有明确的模态栈、Esc关闭、backdrop、焦点锁定；popover没有 backdrop、不锁焦点、不拦截 Tab 键，纯属“浮层” -
<dialog popover></dialog>是非法组合：加了popover就失去<dialog></dialog>的模态能力，又没获得 popover 的 anchor 定位，Chrome 125+ 已警告弃用 - 移动端 Safari 对
popover的 scroll lock 支持极差，快速滚动时弹层常卡在旧位置不动 - Firefox 当前（2026 年 5 月）仍无任何 popover 实现，检测到
"showPopover" in HTMLElement.prototype为false是常态，不是临时 bug
beforetoggle 事件为什么监听不到“即将关闭”？
它根本不是关闭前钩子，而是状态切换启动信号。事件对象只有 opened 字段，且无法取消：
为什么不能把 popover 当 dialog 用？
两者设计目标完全不同，强行混用会导致焦点、遮罩、生命周期全部失控：
真正要落地，得接受一个事实：popover 不是渐进增强，而是“有就是有，没有就是没有”。它的最大价值不是替代 dialog，而是在 Chromium 生态内省掉几行 JS 绑定——但一旦涉及定位、动画、表单集成或跨浏览器，就必须切回 <dialog></dialog> 或 tippy.js。
