dialog 默认隐藏且需调用 showmodal() 或 show() 显示；showmodal() 推荐用于禁用背景交互并自动聚焦，关闭须统一调用 close() 并监听 close 事件处理逻辑。
dialog 标签默认不显示，必须用 showModal() 或 show() 触发
直接写 <dialog></dialog> 在页面里，用户完全看不到——它默认 display: none，且不会响应 click 或 focus。不调用 JS 方法，它就只是个“隐形盒子”。
实操建议：
• 退出按钮点击后，必须显式调用 dialogElement.showModal()（推荐）或 dialogElement.show()
• showModal() 会禁用背景交互、自动聚焦首个可聚焦子元素，更符合“系统提示”预期
• 若用 show()，需手动加 backdrop 样式和键盘拦截（如 Escape 关闭），容易漏
关闭 dialog 必须主动调用 close()，不能只靠点击遮罩或按 Esc
虽然 showModal() 默认支持 Esc 关闭和点击 backdrop 关闭，但前提是 dialog 内部没有阻止事件传播的逻辑。常见翻车点：
• 给 dialog 外层套了 stopPropagation() 的 wrapper
• 在 dialog 内监听了 click 但没判断 target 是否为 cancel 按钮
• 使用了自定义按钮但没调用 dialog.close()
实操建议：
• 所有关闭操作（确认、取消、Esc、遮罩点击）统一走 dialog.close()
• 监听 close 事件做后续处理，比如跳转或清理状态：
dialog.addEventListener('close', () => {<br> if (dialog.returnValue === 'confirm') {<br> location.href = '/logout';<br> }<br>});
• 不依赖浏览器默认行为，尤其在封装成组件时
样式定制要覆盖 ::backdrop 和焦点管理
dialog 的半透明遮罩是伪元素 dialog::backdrop，不单独设样式的话，默认灰黑、无过渡、层级可能被其他 fixed 元素盖住。
实操建议：
• 必须显式设置 dialog::backdrop 背景色和 opacity：
dialog::backdrop {<br> background-color: rgba(0, 0, 0, 0.6);<br> animation: fade-in 0.2s;<br>}
• dialog 自身需设
margin: 0（浏览器默认有 margin）• 确保内部按钮有
type="button"，否则表单内点击可能触发 submit• 用
autofocus 属性指定默认焦点元素，避免键盘用户卡在背景
IE 和 Safari 15.2 之前不支持 dialog，降级方案不能只靠 CSS 显示
当前（2024 年中）Safari 15.2+、Chrome 33+、Firefox 98+ 支持，但旧版 Safari 和所有 IE 完全不识别 <dialog></dialog> 标签，解析为未知元素，CSS 选择器失效，JS 方法报错。
实操建议：
• 检测支持性：
if (!('showModal' in HTMLDialogElement.prototype)) {<br> // 加载 polyfill 或 fallback 到 div + 手动模态逻辑<br>}
• 不要用
document.createElement('dialog') 判断，某些旧浏览器能创建但无方法• Polyfill 推荐用
@github/details-element-polyfill 的 dialog 分支，或轻量手写（仅需模拟 backdrop、focus 锁、Esc 逻辑）• 降级时，别只改
display: block，还得补 tabindex、aria-modal、焦点陷阱
实际用起来最易忽略的是：dialog 的 returnValue 只在调用 close('xxx') 时生效，而点击 backdrop 或 Esc 关闭时，returnValue 是空字符串——不是 null，也不是 undefined。这个细节决定你能不能靠它区分用户点了“取消”还是“关掉了遮罩”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
