原生 dialog 不支持嵌套栈式打开、内容分发、样式穿透和生命周期钩子，需用 Custom Element 封装实现多实例独立状态、命名 slot 内容分发、实例级 ESC/遮罩关闭监听、slotchange 动态响应及焦点管理。
为什么不用 dialog 元素直接做复杂模态框？
因为原生 dialog 不支持嵌套栈式打开（多个同时 showModal() 会报错或行为不一致），也不提供内容分发、样式穿透或实例生命周期钩子。真要实现「带表单校验的编辑弹窗 + 叠在它上面的确认二次弹窗 + 支持键盘 ESC 逐层关闭」，必须脱离纯 dialog，用 Custom Element 封装状态与 DOM 生命周期。
如何用 customElements.define() 管理多实例与 slot 内容
关键不是写一个模态框，而是让每个实例能独立持有自己的标题、主体、按钮区，并且互不干扰。命名 slot 是必须的：
<modal-dialog><span slot="title">编辑用户</span><div slot="body"><input name="name"></div><div slot="footer"><button data-action="submit">保存</button></div></modal-dialog>- 在自定义元素的
shadowRoot中，用<slot name="title"></slot>显式接收，避免默认 slot 混淆 - 每个实例通过
this.id或this.dataset.id标识，事件监听绑定到 shadowRoot 内部，不污染全局
怎么处理 ESC 键和点击遮罩层的关闭逻辑？
不能靠全局 window.addEventListener('keydown', ...)，否则多个模态框会互相干扰。正确做法是每个实例自己监听：
- 在
connectedCallback中为自身 shadowRoot 添加keydown监听，只响应Escape，并调用this.close() - 遮罩层（overlay）用
pointer-events: auto，但内容容器（content）设pointer-events: none，再在 content 内部子元素上显式设回pointer-events: auto，防止误触底层模态框 - 关闭时触发
close自定义事件，并附带detail: { reason: 'esc' | 'overlay' | 'button' }，方便上层决定是否提交或丢弃数据
为什么 slotchange 事件比手动 querySelector 更可靠？
因为用户可能动态插入/替换 slot 内容（比如异步加载表单字段），slotchange 能捕获这种变更；而 querySelector 只执行一次，后续 DOM 变更不会被感知。
立即学习“前端免费学习笔记（深入）”；
- 监听：
this.shadowRoot.querySelector('slot[name="body"]').addEventListener('slotchange', () => this.syncFormState()) - 注意：slot 内容不在 shadowRoot 中，所以不能直接用
this.shadowRoot.querySelector('[slot="body"]')找到内容节点，得用assignedNodes()获取 - 如果 slot 为空，
assignedNodes({ flatten: true }).length === 0，可据此禁用提交按钮
focus() 和 returnFocus 显式控制。 
