默认不显示，必须调用showmodal()才能激活完整模态行为；富文本编辑器需在dialog显示后初始化，关闭时须手动清空、销毁并置空实例。
dialog 默认不显示，必须调用 showModal() 才能激活模态行为
写了 <dialog></dialog> 却看不到任何内容？不是 CSS 没写对，是它根本没“启动”。<dialog></dialog> 默认是 display: none，不参与布局、不渲染、getBoundingClientRect() 返回空值——连 DOM 绘制都跳过。加 open 属性（如 <dialog open></dialog>）能让内容可见，但只是浮层：无遮罩、不锁焦点、不响应 Esc，不是真正模态对话框。必须用 JavaScript 调用 dialog.showModal()，才触发 backdrop、焦点锁定、Esc 关闭等完整模态语义。
富文本编辑器（如 WangEditor）必须在 dialog 显示后初始化
WangEditor 需要操作真实 DOM 节点，而 <dialog></dialog> 在未打开时内部元素不可访问（document.querySelector('#editor') 返回 null）。若在 Vue 的 mounted 钩子中直接创建实例，会报错“节点不存在”。正确做法是监听 dialog 的显示事件：
- 原生
<dialog></dialog>：监听dialog元素的aftertoggle事件，检查event.target.open === true - Vue + Element UI：
@opened钩子内调用new E(this.$refs.editor)并.create() - 务必在初始化后立即设置内容：
this.editor.txt.html(this.richTextFromApi)，而不是用v-html往容器里塞 HTML——否则后续.txt.html()会重复拼接
关闭 dialog 时必须手动销毁富文本实例并清空内容
不处理关闭逻辑，会导致多个问题：
- 多次打开 dialog，WangEditor 实例不断叠加，DOM 节点嵌套混乱，编辑器功能异常
- 上一次编辑的内容残留，回显到下一次弹窗，与数据库实际值不一致
- 内存泄漏：未销毁的编辑器持续监听事件、持有 DOM 引用
应在 dialog 关闭时执行：
- 调用
this.editor.txt.html('')清空内容 - 调用
this.editor.destroy()彻底卸载实例 - 将
this.editor = null，避免后续误调用 - 原生
<dialog></dialog>可监听close事件；Element UI 用@closed钩子
点击遮罩不关闭 dialog 是设计行为，别指望自动关闭
showModal() 创建的遮罩（backdrop）点击默认不触发关闭——这不是 bug，是规范要求。浏览器不给 backdrop 分配独立 DOM 节点，无法直接绑定事件。常见错误做法包括：
- 监听
dialog的click事件却不判断点击目标，导致点编辑器内部按钮也关闭 - 试图给
dialog::backdrop加pointer-events: auto再绑定事件（无效，伪元素不能绑定事件）
可靠方案只有两个：
- 只给明确的「取消」按钮或「X」图标绑定
dialog.close() - 监听
keydown，捕获Escape键，再调用close()
富文本场景尤其要注意：编辑器内部可能有大量可点击区域（图片、链接、菜单），盲目监听整个 dialog 的 click 极易误关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
