需调用showmodal()才生效，仅设open属性无效；必须为直接子元素，内部有可聚焦元素，::backdrop需显式设背景色，并通过method="dialog"或submit事件处理表单关闭。
写了<dialog></dialog>却完全不显示？不是浏览器 bug，是没调用showModal()——这是 90% 新手卡住的第一步。
为什么<dialog open></dialog>写了也看不见
<dialog></dialog>默认不参与渲染，连getBoundingClientRect()都返回空值。加open属性只让 DOM 标记为“已打开”，但不会激活模态栈、不加遮罩、不锁焦点、不响应 Esc。
- 真正生效必须调用
dialog.showModal()，且只能在DOMContentLoaded后执行 - 写在
里或window.onload里容易报Cannot read property 'showModal' of null - 别用
dialog.style.display = 'block'强行显示——这会绕过原生焦点管理，Tab 键直接穿透 - 如果服务端预渲染了
open，仍需 JS 补调showModal()，否则用户看到的是“裸 dialog”
点击遮罩关闭必须手动监听
规范明确不支持点击::backdrop自动关闭，这不是遗漏，是设计选择。浏览器只把它当视觉层，不赋予交互语义。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 有兼容问题：点击遮罩时
e.target恒为body，需 fallback 判断坐标，例如e.clientX - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效 - 想禁用遮罩关闭？直接加
oncancel="event.preventDefault()"即可，它会同时拦截 Esc 和遮罩点击
结构和样式不合规，整个模态行为就断裂
<dialog></dialog>的定位、遮罩渲染、焦点捕获全依赖浏览器原生机制，一旦结构或样式违规，showModal()就会静默失败或部分失能。
- 必须是
的直接子元素；嵌套在<div style="position: relative">、<code><form></form>或 Shadow DOM 内都会导致 backdrop 错位、Esc 失效 - 不能给
dialog自身设position: absolute或transform，否则遮罩层偏移、焦点逃逸 -
dialog::backdrop必须显式声明背景色（如background: rgba(0,0,0,0.5)），Chrome/Safari 默认透明，Firefox 虽有但颜色不可控 - 确保内部有至少一个可聚焦元素（如
<button></button>或<input>），否则showModal()无法锁定焦点，用户 Tab 键仍会切到背景页 - 最简方案：给
<form></form>加method="dialog"属性，提交后自动关闭并设置dialog.returnValue，不刷新页面 - 需要异步处理（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里，要绑定到form的submit事件，否则用户回车提交会漏掉 -
dialog.returnValue只在显式调用close('confirm')或method="dialog"按钮提交时才有值，普通点击关闭后是undefined
表单提交刷新页面？因为没用method="dialog"
<form></form>在<dialog></dialog>内仍按默认行为提交，触发整页 reload——dialog.close()根本没机会执行。
真正难的不是写出<dialog></dialog>标签，而是确保它被挂载在下、内部有可聚焦节点、::backdrop有显式背景、关闭路径覆盖 click + Esc + submit 三路——少一个，用户就能绕过你的弹窗逻辑。
