要让组件对外部样式完全免疫，关键是启用封闭模式（mode: "closed"）的 Shadow DOM 并内联所有样式，避免外部依赖；封闭模式使 shadowRoot 返回 null，阻止外部访问与篡改，配合 shadow 内 style 标签和禁用 slot 穿透，可实现真正样式隔离。
要让组件对外部样式完全免疫，关键不是用 ShadowRoot 属性本身（它只是只读的访问器），而是通过启用封闭模式（mode: "closed"）的 Shadow DOM，并配合合理的封装策略。真正的“免疫”来自 Shadow DOM 的样式作用域隔离机制，而非某个属性。
使用 attachShadow({ mode: "closed" }) 创建强隔离根
封闭模式能阻止外部 JavaScript 通过 element.shadowRoot 访问内部结构，是样式免疫的第一道防线：
-
mode: "open"允许外部 JS 获取 shadowRoot 并插入全局样式（破坏免疫）； -
mode: "closed"让element.shadowRoot返回null，从根源上杜绝外部篡改； - 注意：封闭模式下，必须在创建时就通过
innerHTML或appendChild注入所有 DOM 和样式，后续无法从外部补丁。
在 Shadow Root 内部内联全部样式，禁用外部层叠影响
Shadow DOM 天然隔离样式，但需主动避免意外泄漏或引入：
- 所有 CSS 必须写在
<style></style>标签中并 直接附加到 shadowRoot，不要依赖外部<link>或全局 class； - 避免使用
all: initial或all: unset—— 它们会重置继承链，反而可能暴露内部元素给外部选择器； - 对需要透出的属性（如
color、font-family），显式使用 CSS 自定义属性（--my-comp-color）并由组件自身提供默认值，不依赖继承。
禁止 slot 内容被外部样式穿透（可选增强）
如果组件使用 <slot></slot> 接收外部内容，这部分内容仍可能受外部样式影响。要彻底免疫：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 避免开放
<slot></slot>；如必须，用slot="named"+::slotted(*)在 shadow 内主动重置样式； - 对传入的 slot 内容，用
getInnerHTML()或cloneNode(true)深拷贝后清理 class / style 属性，再注入 shadowRoot； - 慎用
/deep/、::ng-deep等穿透性伪类——它们已废弃且破坏封装。
验证是否真正免疫：三步检查法
完成封装后快速验证隔离效果：
- 在页面全局 CSS 中写
my-custom-element { border: 5px solid red !important; }—— 应无任何视觉变化； - 用 DevTools 尝试展开 shadowRoot（封闭模式下应显示为 “#shadow-root (closed)” 且不可点开）；
- 执行
document.querySelector('my-custom-element').shadowRoot—— 返回null即为成功。
不复杂但容易忽略：Shadow DOM 的样式免疫是自动生效的，前提是不用开放接口破坏它。核心就是“封闭创建 + 内联样式 + 零外部依赖”。
