dialog标签默认隐藏且需调用showmodal()或show()才能显示，showmodal()启用模态行为并生成::backdrop遮罩，关闭后元素仍保留在dom中须手动处理，表单关闭必须使用method="dialog"。
dialog 标签必须配合 showModal() 或 show() 才能显示
直接写 <dialog></dialog> 在页面里，它默认是隐藏的，且不会自动渲染到视口中心——这点和 <div> 完全不同。浏览器对 <code><dialog></dialog> 的初始 display 是 none，不调用 JS 方法就永远看不见。
常见错误是只写 HTML、加 CSS 以为能“激活”，结果白屏或布局错乱。必须显式调用：
-
myDialog.showModal()：模态式（焦点锁定、背景变灰、Esc 关闭、点击 backdrop 不关闭） -
myDialog.show()：非模态（无焦点拦截、可自由操作页面其他元素）
推荐优先用 showModal()，否则容易忽略焦点管理，导致键盘导航失效或屏幕阅读器不可读。
dialog 背景遮罩无法用 CSS 直接选中，但可用 ::backdrop
<dialog></dialog> 激活后，浏览器会自动在它下方插入一个匿名的 backdrop 层，这个层不能用 class 或 id 选中，也不能用 JavaScript 获取 DOM 节点。唯一控制方式是伪元素 ::backdrop。
典型误操作是写 .dialog-backdrop { … } 或试图 document.querySelector('.backdrop') —— 都无效。
正确写法示例：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
animation: fade-in 0.2s ease;
}
注意：::backdrop 只在 showModal() 下生效；show() 不触发 backdrop。
dialog 关闭后仍留在 DOM 中，需手动调用 close() 并处理返回值
<dialog></dialog> 不会自动从 DOM 移除，即使用户点了 Esc 或点击 backdrop（仅限 showModal()），它只是视觉隐藏，open 属性被移除，但元素还在。
如果不清理，多次打开会累积多个 dialog 实例，影响性能和事件监听逻辑。
安全做法是：
- 始终绑定
close事件监听，而非依赖click或keydown - 在回调里显式调用
dialog.close()（虽然此时已关闭，但确保状态同步） - 检查
dialog.returnValue获取关闭原因（如'cancel'、''或自定义字符串）
例如：dialog.addEventListener('close', () => console.log(dialog.returnValue)) —— 这个值在用户按 Esc 时是 'cancel'，点 <form method="dialog"></form> 内按钮时是按钮的 value。
表单提交关闭 dialog 必须用 method="dialog"，不能靠 type="submit"
很多开发者以为给按钮加 type="submit" 就能关 dialog，结果发现没反应。真正起作用的是 <form method="dialog"></form> 这个声明。
关键规则：
- 只有
<form method="dialog"></form>内部的<button type="submit"></button>或回车提交，才会触发关闭并设置returnValue - 按钮的
value属性值会成为dialog.returnValue，比如<button value="confirm">确定</button>→ 关闭后dialog.returnValue === 'confirm' - 没有
method="dialog"的 form 提交会跳转或刷新页面，完全绕过 dialog 控制流
别漏掉这个属性，它是原生 dialog 表单交互的开关。
拟态效果本身靠 CSS 实现（圆角、阴影、字体层级），但真正让 dialog “像对话框”而不是“像 div”的，是它的语义行为：焦点锁、backdrop、returnValue 和与表单的深度集成。漏掉任意一环，都可能在无障碍或键盘操作场景下彻底失效。
