dialog 元素默认 display: none，需用 showModal() 或 show() 显式调用；关闭需手动绑定 click/keydown 事件并调用 close()；旧版 Safari/IE 不支持，须 JS 检测降级；无障碍需 aria-labelledby、aria-controls 和手动聚焦。
dialog 元素默认不显示，必须手动调用 show() 或 showModal()
很多人写完 <dialog><p>隐私声明</p></dialog> 发现页面完全没反应——这不是 bug，是标准行为。<dialog> 初始状态为 display: none，不会自动渲染到界面上。
必须用 JavaScript 显式打开：
const modal = document.querySelector('dialog');
modal.showModal(); // 推荐：带模态遮罩、焦点捕获、Esc 关闭
// 或 modal.show(); // 非模态，无遮罩，不拦截外部点击
注意：showModal() 是关键，否则用户能自由操作背景内容，失去“声明窗口”的约束力。
点击遮罩或按 Esc 无法关闭？检查是否遗漏 close() 调用和事件绑定
<dialog> 不会自动响应遮罩点击或 Esc 键——它只提供基础能力，关闭逻辑得自己写。
立即学习“前端免费学习笔记（深入）”；
常见错误：只写了 showModal()，但没监听 click 或 keydown 事件。
- 遮罩关闭：监听
dialog自身的点击，但需排除内部内容（否则点声明文字也会关） - Esc 关闭：监听
keydown，判断e.key === 'Escape' - 必须调用
dialog.close()，不是remove()或hidden = true
简例：
const dialog = document.querySelector('dialog');
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
dialog.addEventListener('keydown', e => {
if (e.key === 'Escape') dialog.close();
});
IE 和 Safari 旧版本不支持，dialog 需要渐进增强兜底
<dialog> 在 Safari ≤ 15.6、所有 IE、部分安卓 WebView 中完全不可用。不能只依赖它做唯一实现。
稳妥做法是检测支持性，降级为 div + 手动控制样式/逻辑：
if (!('showModal' in HTMLDialogElement.prototype)) {
// 替换 dialog 为 div，添加 aria-modal="true"、role="dialog"
// 手动管理焦点、遮罩、Esc 逻辑
// 可复用现有 modal 工具函数
}
不要用 @supports (display: dialog) 做 CSS 检测——它在部分浏览器中误报；JS 特性检测更可靠。
无障碍访问容易出问题：缺少 aria-labelledby 或焦点未落入弹窗
屏幕阅读器用户依赖语义标记理解弹窗用途。仅靠 <dialog> 标签不够。
必须补充：
- 给弹窗加
id，并在触发按钮上用aria-controls="dialog-id" - 弹窗内首个标题用
id="title-id"，再通过aria-labelledby="title-id"关联 - 打开后手动
dialog.focus()或聚焦到第一个可交互元素（如「我已知晓」按钮）
否则 NVDA/JAWS 可能读不出标题，或焦点卡在背景，用户无法操作。
声明类弹窗尤其要注意：法律合规场景下，无障碍缺失可能带来实际风险。
