必须在数据加载完成并插入 DOM 后调用 dialog.showModal()，否则会导致弹窗空白、焦点错乱或 backdrop 失效；需确保首元素可聚焦、正确绑定关闭逻辑、每次打开前清理旧状态并重新绑定事件。
dialog.showModal() 必须在数据加载完成后调用
直接 dialog.showModal() 再去 fetch 数据，会导致弹窗空白或焦点错乱——showModal() 一执行就锁定焦点、渲染 backdrop，但此时 DOM 还没填充内容，浏览器会静默失败或聚焦到背景页。
正确顺序是：先确保内容已插入（包括异步加载的 HTML 或 JSON 渲染结果），再调用 showModal()。尤其注意 connectedCallback() 中不能立即调用，因为子节点可能尚未 ready。
- 推荐在
fetch().then(html => { dialog.innerHTML = html; dialog.showModal(); })的末尾触发 - 若用模板字符串拼接，确保所有占位符已替换完毕，再插入
dialog - 避免在
showModal()后用setTimeout延迟渲染——这会破坏焦点捕获时机，Tab 键仍可逃逸
动态内容必须包含可聚焦元素，否则焦点管理失效
showModal() 会自动尝试聚焦第一个可聚焦子元素（如 <button>、<input>），但如果动态插入的内容以 <h3> 或 <p> 开头，且没有显式设置 tabindex="0"，焦点就会留在页面其他地方，用户按 Tab 键直接穿透出去。
- 服务端返回的 HTML 片段里，确保首个子节点是
<button>或带tabindex="0"的容器 - 若首元素是 disabled 或
hidden，showModal()不报错也不重试，必须手动dialog.querySelector('button:not([disabled])')?.focus() - 测试时禁用鼠标，纯用键盘 Tab 和 Esc 验证是否真正锁住
点击 backdrop 关闭需兼容 Safari 坐标 fallback
动态加载后绑定的 click 监听器，如果只写 if (e.target === dialog) dialog.close()，在 Safari 15.4–16.3 下大概率失效——该版本中点击 backdrop 时 e.target 恒为 document.body，不是 bug，是渲染层事件冒泡异常。
立即学习“前端免费学习笔记（深入）”；
- 必须加降级判断：
const rect = dialog.getBoundingClientRect(); if (e.clientX rect.right || e.clientY rect.bottom) dialog.close(); - 不要依赖
event.composedPath()或pointer-events样式修复，这些会干扰原生焦点栈 - 监听器必须在每次
showModal()前重新绑定，避免旧实例残留导致多次 close
关闭后清理状态比渲染更关键
动态加载的数据常带副作用：未取消的 fetch、重复绑定的事件、未销毁的 IntersectionObserver。用户快速打开/关闭多次，内存泄漏和事件堆积会立刻暴露。
- 在
dialog.addEventListener('close', () => { /* 清理逻辑 */ })中执行：取消 pending 请求、observer.unobserve(dialog)、移除内部定时器 - 别把数据缓存在全局变量里；用
dialog.dataset.loaded = 'true'标记状态，CSS 和 JS 都能读，也兼容 SSR - 如果加载失败，显示重试按钮并绑定
click，而不是静默重试——用户需要明确感知“加载卡住了”
动态加载本身不难，难的是让每一次 showModal() 都像第一次那样干净：DOM 就位、焦点可控、backdrop 可点、关闭可预测。漏掉其中任一环，模态框就退化成一个会动的 div。
