dialog标签默认不显示且不渲染，需调用showmodal()激活模态行为；仅设open属性仅可见但无模态功能；关闭需手动监听点击或esc；表单提交要防刷新；样式、居中、焦点均需自行处理。
dialog 标签不会自动显示，写了就以为能弹出来——这是最常踩的坑。它默认 display: none 且不参与渲染，必须调用 showModal() 才真正激活模态行为。
为什么写了 dialog 却完全看不到？
不是 CSS 没写对，是根本没“启动”它。原生 <dialog></dialog> 在 DOM 中存在，但浏览器跳过布局和绘制，连 getBoundingClientRect() 都返回空值。
- 仅加
open属性（如<dialog open></dialog>）可初始显示，但不启用 backdrop、不锁焦点、不响应 Esc —— 它只是“可见”，不是“模态” - 必须在 DOM 加载完成后调用
dialog.showModal()，否则报Cannot read property 'showModal' of null - 别用
dialog.style.display = 'block'或dialog.hidden = false，这会绕过原生焦点管理，Tab 键直接穿透出去
点击遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范明确不支持自动关闭。showModal() 创建的 ::backdrop 默认不可点击，也不冒泡事件到 dialog 元素本身。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：点击 backdrop 时
e.target可能始终是，需 fallback 到坐标判断（如e.clientX ） - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效
form 提交后页面刷新，dialog 消失？
因为 <form></form> 在 <dialog></dialog> 内仍按默认行为提交，触发整个页面 reload —— dialog.close() 根本没机会执行。
- 最简方案：给
form加method="dialog"属性，提交后自动关闭并设置dialog.returnValue，不刷新页面 - 需要异步处理（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动调用dialog.close() - 别把关闭逻辑写在按钮的
onclick里，要绑定到form的submit事件，否则用户回车提交会漏掉
样式、居中、焦点都难看？这些全得自己补
dialog 没有统一默认样式，Chrome 圆角白底带阴影，Firefox 是透明块，Safari 甚至默认不居中；焦点也只尝试聚焦第一个可聚焦子元素，失败就静默。
- 居中靠浏览器内置逻辑，但前提是
dialog直接挂载在下，嵌套在<div style="position: relative"> 或 <code><form></form>里会破坏它 - 用
dialog::backdrop控制遮罩层（如background: rgba(0,0,0,0.5)），但 Safari 对该伪元素支持不全，必要时加一层<div class="backdrop"> 模拟 <li>确保内部第一个可聚焦元素存在且可用（如 <code><button autofocus></button>），否则键盘 Tab 会跳出对话框；标题建议用<h3 id="title"></h3>+aria-labelledby="title"
最容易被忽略的是：它不处理任何交互逻辑，只提供语义容器和两个方法。点遮罩关、Esc 关、表单关、焦点锁——全得你一行行写，而不是“用了就完事”。
