标签需 javascript 控制显示/隐藏，不支持自动弹窗；默认无样式、无遮罩，safari 需手动启用实验性功能；模态需 showmodal()，非模态用 show()；关闭用 close() 且不销毁 dom；不支持 open 属性手动设置；表单提交不会自动关闭，须拦截并手动处理；::backdrop 伪元素受限，复杂场景建议自定义遮罩。
<dialog></dialog> 标签本身不支持直接“动态弹窗”——它必须配合 JavaScript 的 show()、showModal() 和 close() 才能触发显示/隐藏，且默认无样式、无 backdrop、在 Safari 中需手动启用实验性功能。
dialog 元素必须显式调用方法才能显示
HTML 中写 <dialog>内容</dialog> 不会自动出现。它初始状态是 display: none，DOM 存在但不可见。必须用 JS 控制：
-
myDialog.show()：非模态（可点击外部关闭，不阻断背景交互） -
myDialog.showModal()：模态（带半透明遮罩、聚焦锁定、Esc 关闭） -
myDialog.close()：仅隐藏，不销毁 DOM；若需重用，推荐保留元素而非remove()
常见错误：只写 HTML 不调 JS，或误以为 open 属性是布尔值——它其实是只读属性，由 JS 方法触发后才变为 true。
Safari 中 dialog 需开启实验性功能或降级处理
Safari 15.4+ 默认仍禁用 <dialog></dialog>，用户需手动打开「开发 → 实验性功能 → dialog element」。生产环境不能依赖此行为。
- 检测是否支持：
typeof HTMLDialogElement !== 'undefined' - 不支持时建议 fallback 到
<div role="dialog"> + 手动管理 <code>aria-modal、焦点捕获和 backdrop - 不要用
@supports (display: dialog)做判断——该 CSS 特性从未被标准采纳，纯属误导 - 阻止默认行为：
form.addEventListener('submit', e => { e.preventDefault(); myDialog.close(); }) - 注意：关闭前建议先校验数据，否则用户可能误点提交却没反馈
- 如果用
method="dialog"（仅限<button type="submit"></button>触发），点击后会触发close事件，但**仅对 button 生效，且不适用于 AJAX 提交场景** - 基础样式：
dialog::backdrop { background: rgba(0,0,0,0.5); } - 无法用
dialog[open]::backdrop这类选择器——[open]属性在打开瞬间才存在，但 ::backdrop 只在showModal()期间渲染，二者生命周期不完全同步 - 如需更复杂 backdrop（如带动画、渐变或点击穿透逻辑），建议放弃 ::backdrop，改用自定义
<div class="backdrop"> 手动 toggle <p>真正难的不是怎么让它弹出来，而是怎么让它关得稳、适配全浏览器、不打断用户操作流——尤其是当 dialog 里嵌了富文本编辑器或第三方组件时，焦点管理和事件拦截很容易漏掉一两个边界情况。</p> </div>
dialog 内部表单提交不会自动关闭，需手动监听
<dialog></dialog> 对表单无特殊处理。即使 form 在 dialog 内，submit 后页面仍会跳转或刷新，dialog 不会消失。
backdrop 样式需单独定义，且无法用 :has() 精准控制
模态 dialog 激活时会生成一个匿名 ::backdrop 伪元素，但它不参与 DOM 树，也不能用 JS 查询或绑定事件。
