不能继承 HTMLDialogElement 因 Safari 完全不支持 extends 'dialog' 语法，调用 customElements.define 静默失败，导致组件不渲染且无法降级；必须用 <my-dialog> 包裹动态挂载至 document.body 的 <dialog>，并通过 slot 透传内容、暴露 open 属性及 showModal()/close() 方法，同时为 Safari 提供 JS 驱动的完整降级方案。
为什么不能继承 HTMLDialogElement？
因为 Safari 完全不支持 customElements.define('my-dialog', MyDialog, { extends: 'dialog' }) 语法，调用后静默失败，组件在 Safari 中彻底不渲染，且无法 fallback。Chrome/Firefox 虽支持，但跨浏览器一致性被破坏。强行使用等于放弃 Safari 用户——这不是兼容性问题，是功能缺失。
<my-dialog> 必须把真实 <dialog> 挂到 document.body
<dialog> 的 backdrop（遮罩层）只在它是 document.body 的直接子元素时才生效；放进 Shadow DOM 或任意嵌套容器里，backdrop 就失效。所以组件内部不能渲染 <dialog> 到 shadowRoot，而必须动态创建、挂载到 body 顶层，并手动管理其生命周期。
实操要点：
- 组件类中用
this._dialog = document.createElement('dialog')创建原生<dialog> - 在
connectedCallback里执行document.body.appendChild(this._dialog) - 在
disconnectedCallback里务必调用this._dialog.remove()，否则残留 DOM - 内容透传用
<slot>，但实际渲染目标是this._dialog，不是 shadowRoot
暴露 open 属性和 showModal()/close() 方法就够了
用户不需要知道底层是 <dialog> 还是 <div role="dialog">，只关心「怎么开」「怎么关」「怎么传内容」。暴露过多方法（比如 show()、hide()）反而导致误用，比如调用 show() 而非 showModal()，丢失焦点锁和 ESC 响应。
立即学习“前端免费学习笔记（深入）”；
关键实现逻辑：
-
open是响应式布尔属性：监听attributeChangedCallback，当open出现时调用this._dialog.showModal()，移除时调用this._dialog.close() -
showModal()方法应检查this._dialog.open === false再调用，避免重复触发异常 -
close()必须手动恢复document.body的滚动（body.style.overflow = ''），因为<dialog>不会自动清理 - 关闭时必须派发
close事件，以便外部监听：this._dialog.dispatchEvent(new Event('close', { bubbles: true }))
Safari 降级方案不能只靠 CSS dialog::backdrop
dialog::backdrop 在 Safari 15.4+ 和部分安卓 WebView 中不可靠，甚至完全不渲染。降级必须是 JS 驱动的完整 fallback：当检测到 !('showModal' in HTMLDialogElement.prototype) 时，放弃 <dialog>，改用 <div role="dialog" aria-modal="true"> + 手动 backdrop <div class="backdrop">，并自行实现焦点锁（focusin 拦截）和 ESC 监听。
容易忽略的点：
- 降级后要主动设置
tabindex="-1"并.focus()到弹窗根元素，否则键盘无法进入 - backdrop 点击关闭必须
event.target === backdropEl判断，不能只靠冒泡，否则点击弹窗内部也会关闭 - 所有交互逻辑（包括焦点循环、ESC、backdrop 关闭）需统一入口，避免 Safari 和 Chrome 两套逻辑割裂
