dialog元素默认不渲染，需调用showmodal()或show()激活；open属性仅初始化可见但非模态；showmodal()启用完整模态链路，show()仅显示浮动层；点击遮罩关闭需兼容safari坐标判断；method="dialog"表单提交后需手动管理焦点与returnvalue兼容性。
dialog 元素默认不渲染、不显示，写了标签 ≠ 弹窗出现 —— 必须调用 showModal() 或 show() 才能真正激活。
为什么写了 <dialog></dialog> 却完全看不到？
因为浏览器对 dialog 的初始处理是 display: none 且跳过布局计算，它连 getBoundingClientRect() 都返回空值。不是 CSS 没生效，是根本没“启动”。
- 仅加
open属性（如<dialog open></dialog>）会让它初始可见，但仍是非模态：无遮罩、不锁焦点、Esc 不响应 -
open是只读初始化开关，不是控制接口 ——dialog.open = false不会关闭弹窗，只会移除属性，弹窗照常开着 - 脚本执行早于 DOM 解析时，
document.querySelector('dialog')返回null，后续调用showModal()必报Cannot read property 'showModal' of null
该用 showModal() 还是 show()？
取决于是否需要强制用户中断当前操作：
-
showModal()：启用完整模态链路 —— 自动添加dialog::backdrop、禁用背景点击、捕获 Tab 焦点、响应 Esc 键、自动聚焦第一个可聚焦子元素 -
show()：仅显示浮动层，无 backdrop、不拦截滚动、不管理焦点 —— 适合工具提示、快捷面板等轻量场景，但所有交互逻辑（键盘、焦点、关闭）都得自己补 - 两者都不支持通过 HTML 属性动态控制显隐，必须靠 JS 方法驱动
点击遮罩关闭弹窗的兼容写法
原生 dialog 不提供“点击 backdrop 关闭”的默认行为，且 Safari 中 e.target === dialog 判断基本不可靠（backdrop 不是真实 DOM 节点）。
- Chrome/Edge 可用：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari（15.4–17.6）需降级：监听
click后检查鼠标坐标是否落在dialog边界外，或手动插入一个<div class="backdrop"> 并绑定事件 <li>别依赖 <code>dialog::backdrop选择器做交互 —— 它纯属样式层，无法 attach 事件或读取状态 - 若用了
show()，压根没有 backdrop，此逻辑直接失效 - 按钮必须是
<button value="xxx"></button>，value会成为dialog.returnValue - 不要在表单上写
onsubmit="return false"或调用event.preventDefault()—— 这会阻止method="dialog"的默认关闭行为 -
dialog.returnValue在 Chrome/Firefox/Edge 中可用，Safari 目前（v17.6）始终为空字符串，不能用于跨浏览器传值 - 关闭后焦点不会自动回到触发按钮，需手动调用
triggerBtn.focus()，否则键盘用户会被困住
表单提交后安全关闭并传值的关键点
用 method="dialog" 的表单是最简洁的原生路径，但细节决定成败：
真正难的不是调用 showModal()，而是 Safari 对 backdrop 可见性、returnValue、焦点锁定的三重不一致 —— 它们不报错，但会让用户操作卡顿或逻辑断裂。
