必须是document.body的直接子元素才能激活模态语义，克隆template中的dialog无效；web component通过运行时创建dialog并挂载到body，配合open属性同步、close事件处理及safari兼容方案，才能实现正确模态行为。
<template></template> 不能直接用来构建可工作的 <dialog></dialog> 组件——克隆后插入任意容器，dialog::backdrop 不渲染、Tab 键穿透、Safari 空白，根本原因是 <dialog></dialog> 必须是 document.body 的直接子元素才能激活模态语义。
为什么 cloneNode(template) 后的 dialog 不生效
很多人把结构塞进 <template id="modal-tpl"><dialog>...</dialog></template>，然后用 cloneNode(true) 插入 main 或 section，结果发现：
-
dialog::backdrop完全不出现（CSS 伪元素依赖 DOM 位置） - 按 Esc 无响应，
Tab可穿透到背景页 - Safari 15.4+ 中克隆出的
<dialog></dialog>被当成普通元素，showModal()静默失败
真正可用的封装必须动态挂载到 body
Web Component 是唯一能兼顾复用性与原生语义的方案。关键不是“复制模板”，而是“运行时创建 + 顶层挂载”：
- 在自定义元素构造函数中：用
document.createElement('dialog')创建实例，而非克隆<template></template> - 在
connectedCallback中：调用document.body.appendChild(this._dialog) - 在
disconnectedCallback中：必须this._dialog.remove()，否则残留 DOM -
<slot></slot>内容要透传到this._dialog，而不是渲染在组件 shadowRoot 里
open 属性同步和 close 事件处理不能靠 attributeChangedCallback 硬套
监听 open 属性变化时，常见错误是没判断当前状态就反复调 showModal()，导致抛错 Failed to execute 'showModal' on 'HTMLDialogElement': The element is already open'：
- 写
<my-dialog open></my-dialog>→ 组件应立即调this._dialog.showModal()，并确保此时this._dialog.open === false - 移除
open属性 → 必须调this._dialog.close()，不能只设this._dialog.open = false -
close事件里要手动恢复document.body.style.overflow = ''，否则滚动被锁死 - 别依赖
dialog.returnValue区分关闭原因：它只在formmethod="dialog"提交时赋值，Esc / backdrop 点击均为undefined
Safari 兼容性不能只靠 CSS fallback
截至 Safari 17.6，dialog::backdrop 仍不支持，且 showModal() 的 returnValue 参数无效、首次 focus() 不稳定：
- 降级不能只加
display: block和position: fixed—— 焦点锁定、Esc 响应、backdrop 点击关闭都得手写 - 检测原生支持：用
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 避免父容器有
transform或will-change，否则 Safari 下<dialog></dialog>渲染错位或消失 - 不要在
<dialog></dialog>内使用position: fixed子元素 —— Safari 渲染异常已知问题
最易被忽略的一点：所有交互逻辑（Esc、backdrop 点击、按钮关闭）最终都必须归结到对同一个 this._dialog 实例的 showModal() 和 close() 调用 —— 模板只是内容来源，不是模态行为的载体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
