原生标签默认隐藏，必须调用showmodal()或show()才显示；showmodal()创建模态遮罩并锁定焦点，show()为非模态；关闭需手动close()，点击遮罩关闭须监听click事件并判断e.target === dialog；safari 15.4+及主流现代浏览器支持，旧版需polyfill；表单内设method="dialog"可自动关闭并设置returnvalue。
原生 <dialog></dialog> 标签确实能创建模态对话框，但直接写上就用不了——它默认不显示，且在 Safari 15.4 之前完全不支持，现在也仍需手动调用 showModal() 或 show() 才能激活。
为什么写了 <dialog></dialog> 却看不到弹窗？
因为 <dialog></dialog> 是“惰性元素”：它被解析后处于关闭状态（open 属性不存在），既不渲染遮罩层，也不拦截焦点。必须显式调用方法才能打开。
- 用
myDialog.showModal()显示模态弹窗（带 backdrop、强制聚焦、Esc 关闭、点击 backdrop 不关闭） - 用
myDialog.show()显示非模态弹窗（无 backdrop，不阻断页面交互） - 用
myDialog.close()关闭（可传参作为close()的返回值，比如close('confirm')） - 必须确保 JS 获取到的是真实 DOM 元素，不是
null（常见于脚本执行早于 HTML 解析）
<dialog></dialog> 的 open 属性只是初始状态，不是开关
open 是布尔属性，仅控制元素初始化时是否打开。它不能响应式控制显隐，也不能通过 element.open = false 来关闭——这只会移除属性，但弹窗依然开着。真正生效的只有 JS 方法。
- 错误写法：
<dialog open id="dlg">...</dialog>+dlg.open = false→ 弹窗仍在 - 正确做法：始终用
dlg.showModal()/dlg.close() - 想监听关闭动作？监听
close事件：dlg.addEventListener('close', () => console.log(dlg.returnValue)) -
returnValue是close()的参数值，可用于区分“确认”“取消”等操作
Safari 和旧版 Chrome 的兼容性补丁怎么做？
目前 Safari 15.4+、Chrome 37+、Edge 79+ 支持 <dialog></dialog>，Firefox 仍需启用 dom.dialog_element.enabled（v99+ 默认开启）。生产环境若需兼容 Firefox 98 以下或 Safari 15.3，得降级：
- 检测支持：
if (!('showModal' in HTMLDialogElement.prototype)) { /* 加载 polyfill 或 fallback */ } - 轻量 fallback：用
<div role="dialog"> + 手动管理 <code>aria-modal="true"、inert、焦点锁定和 backdrop - 推荐 polyfill：
@web/standards-based-dialog-polyfill（比 legacydialog-polyfill更贴近原生行为） - 注意：polyfill 无法完美模拟
returnValue和close事件细节，业务逻辑别强依赖这些
最常被忽略的一点：没有 focus() 管理。原生 <dialog></dialog> 打开后自动聚焦第一个可聚焦子元素，但如果子元素是 <div> 或禁用 <code>tabindex，焦点会落到 <dialog></dialog> 自身——而它默认不可聚焦。务必确保至少一个子元素有 tabindex="0" 或是原生可聚焦元素（如 <button></button>、<input>）。
