dialog 元素默认隐藏且需显式调用 show() 或 showModal() 才显示，关闭必须用 close() 方法，不可用 CSS 隐藏；Safari 存在 backdrop 样式不支持和遮罩残留问题；模态对话框须严格管理焦点与键盘导航以保障可访问性。
dialog 元素必须显式调用 show() 或 showModal() 才会显示
很多人写完 <dialog><p>你好</p></dialog> 发现页面上啥也不出现——这不是 bug，是设计使然。<dialog> 默认是隐藏的，且不会自动插入文档流。它不像 <div> 那样“写了就见”，必须用 JavaScript 主动触发。
关键区别：
-
show()：打开对话框，但不阻塞背景交互（用户还能点按钮、滚动页面） -
showModal()：模态对话框，背景变灰、焦点强制进入 dialog、按 Esc 可关闭（推荐大多数场景）
示例：
<dialog id="myDialog">
<p>确认删除？</p>
<button onclick="this.closest('dialog').close()">取消</button>
<button onclick="handleDelete(); this.closest('dialog').close()">确定</button>
</dialog>
<p><button onclick="document.getElementById('myDialog').showModal()">打开</button>立即学习“前端免费学习笔记（深入）”；
关闭 dialog 必须调用 close()，不能只靠 display: none
直接给 <dialog> 加 style="display: none" 或用 CSS 隐藏，会导致以下问题：
- 焦点管理失效（Esc 键关不掉，
document.activeElement可能滞留在 dialog 内） -
dialog.open属性仍为true，逻辑判断出错 - 再次调用
showModal()时行为异常（尤其在 Safari 中可能卡住）
正确做法始终是调用 close() 方法，并监听 close 事件做清理：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const dlg = document.getElementById('myDialog');
dlg.addEventListener('close', () => {
console.log('用户已关闭，open 状态变为', dlg.open); // false
});
dlg.close(); // ✅ 唯一可靠的关闭方式Safari 对 <dialog> 的兼容性仍需兜底
截至 2026 年，Safari（包括 iOS 17+）已原生支持 <dialog>，但仍有两个常见坑：
- 不支持
backdropCSS 伪元素样式（如dialog::backdrop { background: rgba(0,0,0,0.5); }在旧版 Safari 无效） - 首次调用
showModal()后，若未显式close()就刷新页面，部分 Safari 版本会残留半透明遮罩层
稳妥做法：
- 用
@supports (display: dialog)检测支持度 - 不依赖
::backdrop实现遮罩，改用额外<div class="backdrop">手动控制显隐 - 页面卸载前检查并
close()所有 open 的 dialog
focus 管理和键盘可访问性不是可选项
模态对话框必须满足基础可访问性要求，否则键盘用户（尤其是屏幕阅读器使用者）会卡死在背景里。核心动作有三件：
- 打开时，立即
dlg.focus()或聚焦到第一个可交互子元素（如第一个<button>） - 按 Tab 键时，焦点应在 dialog 内部循环（需手动拦截
Tab事件并重定向） - 按 Esc 关闭后，焦点应回到触发按钮（需记录
triggerEl = event.target）
最简 Tab 循环示例：
dlg.addEventListener('keydown', (e) => {
if (e.key !== 'Tab') return;
const focusable = dlg.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
});dialog 的语义清晰、API 简洁，但它的“隐形规则”比看上去多——比如不调用 close() 就等于没关，没管好焦点就等于把人锁在黑盒里。这些不是边缘情况，而是日常必踩的点。
