dialog 与 popover 本质不同：dialog 是语义化模态容器，自带 backdrop、焦点锁定等特性；popover 是全局布尔属性，需手动控制显示与交互，二者不可混用且兼容性差异大。
dialog 和 popover 根本不是同一类东西
别被名字误导——<dialog> 是语义化模态容器，popover 是一个全局布尔属性（或 popover="manual"），作用对象是任意元素。它们解决的问题不同：<dialog> 天然带 backdrop、焦点锁定、Esc 关闭、Tab 循环；popover 默认无遮罩、不锁焦点、不拦截 Tab、关闭逻辑全靠手动或点击外部区域（取决于 UA 行为）。
触发方式和 DOM 生命周期差异极大
<dialog> 必须显式调用 showModal() 才真正“激活”，否则它连渲染都不参与（getBoundingClientRect() 返回空）；而 popover 元素只要在首次渲染时存在 DOM 中、带 popover 属性，就已进入浏览器的 popover 生命周期——但默认 display: none，必须靠 showPopover() 或 popovertarget 触发才可见。
-
<dialog open>只让内容可见，不是模态框；<div popover>不加任何 JS 或属性联动，永远不显示 -
<dialog>放在<body>非直接子级位置（比如套在<section>里）会出样式/焦点问题；popover元素可以放在任意位置，但不能跨 shadow DOM boundary -
<dialog>的open属性可读写；popover没有对应可读写的状态属性，只能通过hasAttribute("popover")+matches(":popover-open")间接判断
层级与遮罩行为完全不可混用
这是最易踩坑的点：<dialog> 的 showModal() 生成的 backdrop 和浮层天然处于顶层（高于所有普通 z-index），而 popover 默认层级低于 <select>、<video> 等原生控件，且不自动创建 backdrop。若两者共存，popover 极可能盖住 <dialog> 的按钮或文字——尤其当用户点击 popover 内容时，焦点跳转和 Esc 行为会互相干扰。
- 想让 popover 不挡 dialog？唯一可靠做法是：不用 popover，改用
<dialog popover>（仅 Chromium 支持，且需popover="manual"+showPopover()调用） -
::backdrop对<dialog>和popover都生效，但 popover 的 backdrop 默认透明、不可点击；dialog 的 backdrop 默认可点击（需手动监听click判断e.target === dialog才关闭） - Safari 17.4+ 仅支持
popovertarget模式，且要求目标元素首次渲染即存在；Firefox 当前（2026 年 7 月）仍不支持任何 popover 机制，dialog 却全平台可用
别指望它们能“配合”——现实是降级或隔离
所谓“dialog 配合 popover”，实际只有两种可行路径：要么把 popover 内容塞进 <dialog> 里（用 method="dialog" 提交、autofocus 聚焦），要么彻底隔离使用场景——表单内提示用 popover，关键操作确认用 dialog。混用不仅没协同增益，反而放大兼容性裂痕和可访问性风险（比如 popover 挡住 dialog 的“延长会话”按钮，用户按 Esc 关掉的是提示而非警告）。
立即学习“前端免费学习笔记（深入）”；
真正要关心的不是“怎么配”，而是“哪个浏览器里你的用户正在点哪个按钮”。if ("showPopover" in HTMLElement.prototype) 检测后走 popover 路线，否则 fallback 到 <dialog> 或 CSS+JS 实现——这才是当前（2026 年中）唯一靠谱的落地逻辑。
