dialog必须是body的直接子元素，否则Safari和部分Chrome版本不渲染backdrop；必须用showModal()触发模态行为；点击遮罩关闭需手动监听click并判断e.target === dialog。
dialog必须是直接子元素，否则遮罩层不渲染
这不是样式没写对，而是 Safari（v17.6）和部分 Chrome 版本的硬性解析规则：dialog 只有作为 body 的直接子节点时，才会生成并渲染 dialog::backdrop。嵌套在 <div id="app"> 或 Vue/React 根容器里，遮罩直接消失，点空白处无响应、Esc 也无效。
实操建议：
- 把所有
<dialog>标签写在</body>前、</html>后，不包任何父容器 - 动态创建时用
document.body.appendChild(dialogEl)，别插进document.getElementById('root') - 打开 DevTools，检查 DOM 结构：确认
<dialog>的父节点确实是<body>，不是某个<div class="layout"> - 避免父级有
transform、will-change或overflow: hidden—— 这些会让弹窗偏移或被裁剪，尤其在 iOS Safari 上
必须用 showModal()，open 属性不能手动操作
open 属性只控制初始可见性，不触发模态行为；只有 showModal() 才会启用遮罩、焦点锁定、Esc 关闭等可访问性能力。设 dialog.open = false 或删掉 open 属性，会导致 backdrop 残留、close 事件不触发、下一次 showModal() 失败。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 打开只调
dialogEl.showModal() - 关闭只调
dialogEl.close() - 脚本要么放
</body>上方，要么包装在DOMContentLoaded里，避免Cannot read property 'showModal' of null - 关闭后手动调用触发按钮的
.focus()，否则键盘用户焦点丢失
点击遮罩关闭必须手动监听 click 并判断 e.target === dialog
dialog::backdrop 是伪元素，不是真实 DOM 节点，无法直接绑定事件。规范也**没定义“点击遮罩关闭”这个默认行为**——这是很多开发者误以为的“原生功能”，其实必须手写逻辑。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键判断条件只有一个：e.target === dialogEl。只要点在遮罩上，e.target 就是 dialog 元素本身；点内部任意子元素（按钮、输入框、文字），e.target 都是那个子元素，不会误关。
示例代码：
const dialog = document.querySelector('dialog');
dialog.showModal();
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
注意：
- 这个判断在 Safari v17.6 下可靠；用坐标法（
e.clientX等）反而容易出错 - 如果用了
show()而非showModal()，则根本没有 backdrop，此逻辑无效 - 不要监听
document点击再用contains()判断——太重、易漏、iOS 上有事件穿透风险
Safari backdrop 样式需手动补全，且仅限 showModal() 场景
Firefox 目前完全不渲染 dialog::backdrop（仅逻辑阻塞），Chrome/Edge 111+ 和 Safari 17.4+ 支持但默认透明，你得自己加背景色：
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
但要注意：
- 这个样式只对
showModal()生效；show()不产生 backdrop，加了也无效 - Safari 15.4+ 才开始支持
::backdrop伪元素，旧版需 polyfill 或降级方案 - 不要指望它自动响应点击——样式和交互是两回事，点击关闭仍需上面的
e.target === dialog判断
dialog 的挂载位置极其敏感，这点最容易被忽略。 
