Slot 是 Web Components 中实现内容分发的核心机制，配合 Custom Element 和 Shadow DOM 可构建高复用、语义清晰、样式隔离的模态框；通过命名 slot 划分标题、主体、操作区，结合 slotchange 监听、dialog 原生行为、CSS ::part() 定制与 ARIA 保障可访问性，并支持异步加载及多实例管理。
Slot 是 Web Components 中实现内容分发（content distribution）的核心机制，配合自定义元素（Custom Element）和 Shadow DOM，能构建出真正高复用、语义清晰、样式隔离的通用模态框组件。关键不在“怎么写一个模态框”，而在于“如何让使用者自由注入标题、主体、操作区，且不破坏封装性与可访问性”。
结构设计：用命名 Slot 划分语义区域
一个通用模态框至少需支持三类可替换内容：标题区、主体内容区、底部操作区。使用 named slot 显式声明插槽名，比默认 slot 更可控、更易维护：
<template id="modal-template">
<div class="modal-overlay" part="overlay">
<dialog class="modal-dialog" part="dialog">
<header class="modal-header">
<slot name="title"></slot>
<button type="button" part="close-btn" aria-label="关闭">✕</button>
</header>
<main class="modal-body">
<slot name="body"></slot>
</main>
<footer class="modal-footer">
<slot name="footer"></slot>
</footer>
</dialog>
</div>
</template>这样使用者无需关心内部 DOM 结构，只需按 slot 名注入内容即可，例如：
<my-modal>
<h2 slot="title">确认删除？</h2>
<p slot="body">该操作不可撤销，确定要删除这条记录吗？</p>
<div slot="footer">
<button part="cancel">取消</button>
<button part="confirm">确定</button>
</div>
</my-modal>封装逻辑：用 Custom Element 管理状态与交互
将模态框封装为 MyModal 自定义元素，通过属性控制显隐、禁用 backdrop 点击关闭等行为，并暴露方法（如 show() / hide()）供外部调用：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 监听
slotchange事件，动态判断是否缺失必要插槽（如无 title 时自动隐藏 header） - 用
this.shadowRoot.querySelector('dialog').showModal()启用原生 dialog 行为（支持 ESC 关闭、焦点管理） - 为 close-btn 绑定点击事件，并 dispatch 自定义事件（如
close、confirm），让使用者决定后续逻辑 - 通过
static get observedAttributes()监听open属性变化，实现响应式控制
样式与可访问性：Shadow DOM + CSS Parts + ARIA
利用 :host 和 ::part() 实现样式穿透控制，既保证封装性，又允许主题定制：
my-modal::part(overlay) {
background: rgba(0, 0, 0, 0.5);
}
my-modal::part(dialog) {
width: 480px;
border-radius: 8px;
}
my-modal::part(close-btn) {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
}同时确保可访问性：
- dialog 元素天然支持
aria-modal="true"和焦点陷阱（focus trap），无需手动实现 - 为每个 slot 区域添加语义化标签或
aria-labelledby/aria-describedby（如 title slot 自动关联 dialog 的aria-labelledby） - 关闭按钮必须有明确的
aria-label，且支持键盘（ESC、Tab 循环）操作
进阶复用：支持异步内容与多实例管理
真正的高复用不止于静态结构，还需应对动态场景：
- 提供
load(contentPromise)方法，支持异步加载 body 内容（如远程表单、富文本编辑器），加载中显示 skeleton 或 spinner - 在 shadowRoot 中预留
<slot name="loading"></slot>，让使用者自定义加载态 UI - 全局 ModalManager 类统一管理多个模态框栈（stack），避免遮罩层嵌套错乱；通过
z-index动态计算层级 - 支持
data-*属性透传（如data-id="user-123"），方便业务侧绑定上下文
