Shadow DOM 是浏览器原生支持的 DOM 隔离机制，需显式调用 attachShadow() 创建，仅对标准或自定义元素有效；其 style 局部化、事件默认不穿透、JavaScript 仍共享全局作用域。

Shadow DOM 不是“新语法”或框架加的特性，它是浏览器原生支持的 DOM 隔离机制，从 Chrome 53、Firefox 63、Safari 10.1 开始稳定可用——如果你在现代浏览器里写自定义元素，它就默认在后台起作用。

attachShadow() 是唯一入口，不调用就根本没有 Shadow DOM

Shadow DOM 不会自动出现，必须显式调用 attachShadow() 才能为一个元素创建 shadow root。没有这一步，哪怕你写了 ，它也只是普通元素，样式和事件都暴露在外。

• attachShadow() 必须传入 { mode: 'open' } 或 { mode: 'closed' }；推荐始终用 'open'，否则 JS 无法通过 element.shadowRoot 访问内部结构，调试和测试基本瘫痪
• 同一个元素只能调用一次 attachShadow()，重复调用会直接抛错：Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached
• 不能对
  等普通元素随意 attach，但可以对任何标准 HTML 元素（包括 、

  ）或自定义元素（如 ）调用

  style 标签在 shadow root 内才真正“局部化”

  放在 shadow root 里的 只影响该 shadow tree 内部节点，外部 CSS 选不到它，它也选不到外部元素——这不是靠命名约定或 BEM 实现的，是浏览器渲染层硬隔离。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • 不要把全局样式表 link 进 shadow DOM， 在 shadow root 中无效（除非用 adoptedStyleSheets API）
  • 内部用 :host 选择器控制宿主元素自身样式，用 :host-context(...) 响应外部环境（比如主题类），但后者兼容性差，慎用
  • 如果用了 CSS-in-JS 库（如 styled-components），注意它默认不生成 shadow DOM 样式，需手动注入到 shadowRoot.innerHTML 或用 adoptedStyleSheets

  事件不会自动穿透，但可主动配置冒泡行为

  Shadow DOM 天然形成事件边界：内部 click 默认不会冒泡到 light DOM，外部监听不到；但你可以通过 composed: true 显式开启跨边界传播。

  • 自定义事件必须设 composed: true 才能穿出 shadow boundary，否则 document.addEventListener('my-event', ...) 完全收不到
  • event.target 在跨边界后会被重写为 shadowHost（即宿主元素），这是为了保护内部结构不被外部探测——若需原始目标，要用 event.composedPath()[0]
  • focus/blur 类事件默认不冒泡出 shadow DOM，需手动 dispatch 含 composed: true 的新事件来通知外部

  最常被忽略的一点：Shadow DOM 隔离的是 DOM 结构和样式作用域，不是 JavaScript 作用域。内部脚本仍共享全局 window，localStorage、fetch、定时器等完全不受影响——封装感来自渲染层，不是执行层。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！