dialog点击遮罩不会自动关闭是规范行为，需手动监听click事件并严格判断e.target === dialog才调用close()，因backdrop无独立dom节点，点击事件冒泡至dialog本身，而点内部子元素时e.target为其自身。
dialog 点击遮罩层不会自动关闭——这不是 bug，是规范行为。必须手动监听 click 事件并判断点击目标是否为 dialog 元素本身。
为什么 e.target === dialog 才代表点在遮罩上
调用 showModal() 后，浏览器会渲染一个不可见的 backdrop 区域，但它没有独立 DOM 节点；所有对 backdrop 的点击事件都会冒泡到 dialog 元素，且 e.target 就是它自己。而点击内部任意子元素（比如按钮、输入框、div）时，e.target 是那个子元素，不是 dialog。
- 错误写法：
modal.addEventListener('click', () => modal.close())—— 点按钮也会关 - 正确逻辑：只在
e.target === modal时调用close() - 如果
dialog不是body直接子元素（例如被包裹在div#app里），backdrop 可能不渲染，此时该判断永远不成立
dialog::backdrop 样式不生效的常见原因
dialog::backdrop 伪元素仅在 showModal() 被调用后才存在；show()、open 属性或直接写 <dialog open></dialog> 都不会触发它。
- DevTools 里查不到
::backdrop？先确认showModal()是否真被执行了 - CSS 必须写成
dialog::backdrop { background: rgba(0,0,0,0.5); }，不能用opacity控制透明度 - 若要加毛玻璃效果，需配合
backdrop-filter，且background必须显式设置（哪怕只是background: #0003）
如何安全处理关闭后的值读取与事件监听
dialog.close() 和用户按 Esc / 点遮罩触发的是两类事件：close 和 cancel。前者只在显式调用 close() 时触发；后者在 Esc 或点击 backdrop 时触发——二者都意味着弹窗已关闭，但返回值逻辑不同。
- 表单提交后想传值：给
dialog设置returnValue，再调用close() - 必须在
close事件回调里读dialog.returnValue，cancel事件里这个值是空字符串 - 不要只监听
close就以为覆盖全部退出路径；cancel也要处理（比如清空临时状态）
兼容性与焦点管理容易被忽略的点
Firefox 110+、Chrome/Edge 99+ 支持 dialog，Safari ≤ 15.6 和 IE 完全不支持。即使支持，焦点行为也极易出错。
-
showModal()会自动聚焦第一个可聚焦子元素，但如果子元素是div[tabindex="-1"]或disabled输入框，聚焦会失败，导致键盘操作卡住 - 关闭后焦点不会自动回退到触发按钮，需手动
triggerBtn.focus() - 不支持的浏览器中，不能只靠 CSS 模拟遮罩；必须用
inert或aria-hidden="true"禁用背景可访问性，否则屏幕阅读器仍可读取、键盘仍可 tab 穿透
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
