不能继承HTMLDialogElement，因Safari完全不支持extends 'dialog'语法，调用customElements.define静默失败，组件不渲染且无法降级；必须用<my-dialog>包裹动态挂载至document.body的<dialog>，通过slot透传内容、暴露open属性及showModal()/close()方法，并为Safari提供JS驱动的完整降级方案。
别封装成 class MyDialog extends HTMLDialogElement，Safari 会静默失败且不报错，组件直接消失——这是最常踩的致命坑。
为什么不能继承 HTMLDialogElement
Chrome 和 Firefox 支持 customElements.define('my-dialog', MyDialog, { extends: 'dialog' })，但 Safari（截至 17.6）完全不识别该语法，调用后既不注册、也不报错，<my-dialog> 渲染为空白节点。更糟的是，你无法 fallback：它连 HTMLUnknownElement 都不是，事件监听、属性同步全失效。
实操建议：
- 放弃继承方案，改用
<my-dialog>自定义标签，内部用document.createElement('dialog')动态创建真实<dialog> - 必须在
connectedCallback中执行document.body.appendChild(this._dialog)，确保它是<body>的直接子元素——否则 backdrop 不渲染、焦点锁失效 - 不要把
<dialog>写进 shadow DOM 或组件模板里，它必须挂载到 document.body 顶层
open 属性怎么同步才安全
open 是响应式控制入口，但不能简单映射为 this._dialog.open = value。原生 <dialog> 的 open 属性只是“可见性快照”，真正触发模态行为的是 showModal() 和 close()。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 用户写
<my-dialog open>，组件却没显示：没在attributeChangedCallback中调用this._dialog.showModal() - 用户移除
open属性，弹窗仍挂着：只设this._dialog.open = false，没调this._dialog.close()，backdrop 残留、close事件不触发、document.body滚动未恢复 - 重复调
showModal()报错：Failed to execute 'showModal' on 'HTMLDialogElement': The element is already open
正确做法：
- 监听
openattribute 变化，在attributeChangedCallback中判断：新增时调this._dialog.showModal()，移除时调this._dialog.close() - 关闭后手动重置：
document.body.style.overflow = ''，并调用document.body.focus()避免焦点丢失 - 暴露
showModal()和close()方法，让用户显式控制，而不是仅靠属性驱动
点击遮罩关闭在 Safari 怎么兼容
Chrome/Edge 120+ 可靠使用 dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); })，但 Safari 中 e.target === dialog 基本不可靠——backdrop 不是真实节点，事件路径不可读，getBoundingClientRect() 坐标判断也容易误判滚动位置。
性能与兼容性影响：
- 不要依赖
dialog::backdrop做交互逻辑，它纯属样式伪元素，无法绑定事件、无法查询状态 - 放弃“点击 backdrop 关闭”的强一致性，转而提供明确的关闭按钮（如带
value="cancel"的<button method="dialog">），这是最稳定路径 - 若必须支持点击关闭，降级方案应是 JS 创建一个半透明
<div class="backdrop">覆盖全屏，再手动管理焦点锁和 ESC 键，而非修补原生 backdrop
focus 管理和首次打开失焦怎么办
原生 showModal() 应自动聚焦第一个可聚焦子元素，但在 Safari 中常失效：可能因父容器有 transform、will-change，或 dialog 尚未完成渲染就尝试 focus。
容易被忽略的关键点：
- 不要在
showModal()后立刻.focus()，加一层setTimeout(() => this._dialog.focus(), 0)更稳妥 - 关闭后必须手动恢复触发源焦点（如按钮），否则键盘用户卡在空白处；可用
this._triggerEl?.focus()记录并还原 - 避免在
<dialog>内使用position: fixed子元素，Safari 渲染异常概率极高 - 移动端需加
max-width: 90vw; max-height: 90vh;，否则内容溢出不可滚动
真正难的不是写个能弹的组件，而是让 showModal() 在 Safari 里每次都能锁住焦点、每次点击 backdrop 都有预期反馈、每次关闭后页面状态都干净如初——这些细节不在 API 文档里，全靠踩过坑才记得住。
