dialog 和 popover 应直接挂载在 body 下或与 main 同级，不可用 section/article 包裹；dialog 必须独立存在以保障模态语义与焦点捕获，popover 必须通过 commandfor 显式关联语义化触发器。
dialog 和 popover 本身已是语义化标签，不需要、也不应该用 section 或 div 包裹它们——包裹反而破坏语义完整性。
dialog 元素必须独立存在，不能嵌套在 section/article 中
浏览器对 dialog 的语义解析依赖其“顶层模态容器”身份。一旦被 section、article 或 main 包裹，会导致：
- 屏幕阅读器可能忽略其模态属性（如
aria-modal="true"自动注入失效） - 焦点捕获行为异常：打开后焦点未锁定在对话框内
- 部分浏览器（如 Safari 17+）拒绝渲染
open属性，控制台报InvalidStateError
正确写法是直接挂载在 下或紧邻 <main></main> 同级：
<header></header><main></main><footer></footer><dialog id="confirm-dialog"><p>确定删除？</p>
<button onclick="this.closest('dialog').close()">取消</button>
</dialog>
popover 只能由触发元素通过 commandFor 显式关联
popover 不是独立语义区块，它本质是“附着于某控件的临时 UI”，因此：
- 不能放在
aside或section里——这会让辅助技术误判为常驻侧边内容 - 不能手动加
role="tooltip"或aria-hidden——浏览器已原生管理可见性与可访问性状态 - 必须通过
commandFor指向一个按钮/链接，且该触发器需有明确语义（如<button></button>，不能是<div role="button">） <p>错误示例：<br><code><section><popover id="help-popover">...</popover></section>
正确写法：<button commandfor="help-popover">?</button> <popover id="help-popover">这是帮助说明</popover>
modal dialog 和 non-modal popover 的语义边界不可混用
两者在可访问性和交互模型上完全不同：
-
dialog[modal]（或带showModal()调用）：强制焦点锁定、背景遮罩、Esc 关闭、屏幕阅读器进入“模态上下文” -
popover（默认 non-modal）：不阻断背景交互、无遮罩、点击外部自动关闭、不改变阅读器上下文 - 把
popover当dialog用（比如加aria-modal="true"）会触发可访问性校验失败（axe / Lighthouse 报aria-modal-must-be-used-on-dialog）
选型依据不是“长得像不像弹窗”，而是用户任务流：
— 需要中断当前操作并强制决策？用dialog
— 仅提供轻量提示或快捷操作？用popover最易被忽略的一点：所有现代
dialog和popover都要求触发器与容器在 DOM 中**同级或可被浏览器稳定定位**。跨 Shadow DOM、动态插入后未调用popover.showPopover()、或用display: none隐藏再切回block，都会导致语义链断裂——此时浏览器根本“看不见”这个弹出层的存在。 -
