dialog标签不显示是因为默认隐藏，必须通过open属性或showmodal()/show()方法激活；仅写html结构无效，且需手动处理backdrop点击关闭、safari兼容性及焦点管理。
dialog 标签不显示？检查 open 属性和 JavaScript 控制逻辑
原生 <dialog></dialog> 默认是隐藏的，没有 open 属性或 JS 调用 show()/showModal() 就不会出现。常见错误是只写 <dialog>...</dialog> 但没加 open，或者误以为它像 <div> 那样靠 CSS <code>display 控制显隐——它不响应这个。
实操建议：
- 初始展示用
<dialog open></dialog>，但注意页面加载即弹出，体验差，一般只用于调试 - 生产环境必须用 JS 控制：
dialog.showModal()（模态，禁背景交互）或dialog.show()（非模态，背景可点） - 关闭不能只靠
dialog.close()，还要确保触发时机正确——比如监听click事件时，别让点击内部按钮意外冒泡关闭自身 -
showModal()会自动聚焦第一个可聚焦子元素，若 dialog 里没可聚焦内容（如全是<p></p>），焦点行为异常，可能影响键盘导航
点击遮罩层关闭 dialog？原生不支持，得手动监听 backdrop
<dialog></dialog> 的半透明遮罩（backdrop）本身不响应点击事件，click 在 backdrop 上默认无效果。很多开发者以为“点背景就关弹窗”是内置行为，结果发现关不了。
实操建议：
- 监听
dialog元素自身的click事件，但需区分点击区域：event.target === dialog才代表点在 backdrop 上（因为 backdrop 是 dialog 的伪元素，事件目标仍是 dialog） - 更稳妥做法：给 dialog 内容区（如
<div class="dialog__content">）加 <code>pointer-events: auto，dialog 本身保持pointer-events: auto，再通过event.target === dialog判断是否点在空背景上 - 不要用
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); })然后在内部按钮上e.stopPropagation()——这容易漏掉表单控件、SVG 等复杂子树的冒泡处理 - 检测支持性：用
'showModal' in HTMLDialogElement.prototype判断，不支持时降级为<div> + 手动管理 ARIA 和焦点 <li>别引入 full polyfill（如 <code>dialog-polyfill），它会重写整个渲染逻辑，和现代 CSS（如inert、:modal）冲突，维护成本高 - 轻量降级方案：CSS 里用
@supports not (dialog: modal)做样式隔离，JS 中 fallback 到display: none/block+aria-modal="true"+ 手动 trap focus - 注意 iOS Safari 的特殊问题：
showModal()后键盘弹起可能撑开 dialog，导致底部按钮被遮挡，需监听resize或focusin动态调整max-height - 记录打开前的焦点元素：
const $trigger = document.activeElement; dialog.showModal();，关闭后$trigger?.focus() - 如果触发元素已销毁（如列表项被删除），需 fallback 到逻辑上最近的可聚焦容器，比如父列表的
tabindex="0"元素 - 监听
dialog的close事件（不是closed），在这个事件里执行焦点恢复——closed是异步的，此时 DOM 可能已变化 - 避免在
dialog.close()后立刻focus()，某些浏览器（Chrome 115+）会有微小延迟，加requestAnimationFrame(() => $el.focus())更稳
dialog 在 Safari 中不工作？版本兼容性与 polyfill 取舍
Safari 直到 15.4 才支持 <dialog></dialog>，且早期版本（如 15.2–15.3）存在 showModal() 不阻塞滚动、close() 不触发 close 事件等问题。用户反馈“弹窗一闪就消失”或“关不掉”，大概率是 Safari 旧版。
实操建议：
dialog 关闭后焦点丢失？必须手动恢复并管理焦点链
<dialog></dialog> 关闭时不会自动将焦点还给触发它的元素，甚至可能落到 或首个可聚焦节点，破坏键盘用户的操作流。这是 WCAG 2.1 2.4.3（焦点顺序）的硬性要求，也是实际使用中最常被忽略的细节。
实操建议：
