DevTools默认隐藏shadow-root，需开启“显示用户代理 Shadow DOM”才能查看；验证需用el.shadowRoot确认非null；mode: 'closed'下无法调试；样式与DOM操作必须限定在shadow内作用域。
开发者工具里默认不显示 shadow-root，得手动开开关
Chrome、Edge 和新版 Safari 的 DevTools 默认隐藏所有 #shadow-root 节点，哪怕你用了 attachShadow({ mode: 'open' })，在 Elements 面板里也只看到宿主元素，看不到里面的内容。这不是代码没生效，是面板设置关着。
必须打开「显示用户代理 Shadow DOM」才能看到内置组件（如 <video></video>、<input type="date">）和你自己挂载的 shadow root：
- 按
F12或右键 →「检查」打开 DevTools - 点右上角 ⚙️（设置图标）→「偏好设置」→ 左侧选「元素」
- 勾选「显示用户代理 Shadow DOM」
刷新页面后，再点开 <my-button></my-button> 或 <video></video>，就能看到 #shadow-root (open) 节点了。
用 document.querySelector + .shadowRoot 验证是否挂载成功
光看面板不够，有些情况 shadow root 看似存在，实则为 null。比如对 <img alt="HTML怎么在前端调试中查看Web组件影子根节点的结构" > 或 <input> 调用 attachShadow() 会直接报错，但控制台可能被忽略；又或者重复调用导致 InvalidStateError，后续访问 .shadowRoot 返回 null。
立即学习“前端免费学习笔记（深入）”；
最稳的验证方式是在 Console 里手动查：
const el = document.querySelector('my-card');
console.log(el.shadowRoot); // 应该是 ShadowRoot 实例，不是 null
console.log(el.shadowRoot?.innerHTML); // 可快速确认内容是否写入
注意：如果返回 null，常见原因有：
- 宿主元素类型不支持（
<img alt="HTML怎么在前端调试中查看Web组件影子根节点的结构" >、<audio></audio>、<canvas></canvas>等替换元素禁止挂载） - 没传参数或参数为空对象：
el.attachShadow({})会抛TypeError - 已挂载过一次，再次调用
attachShadow()报InvalidStateError
mode: 'closed' 下根本看不到结构，别用它调试
如果你在 attachShadow() 里写了 { mode: 'closed' }，那 DevTools 里即使开了「显示用户代理 Shadow DOM」也看不到 #shadow-root，el.shadowRoot 在外部 JS 中永远是 undefined，连 console.dir(el) 都不会暴露内部树。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
这意味着：
- 无法用 Elements 面板审查结构
- 无法用
querySelector在 shadow 内部查节点 - 调试时只能靠
console.log打点，或改回'open'临时排查
日常开发中，除非有强封装诉求（如 SDK 组件防篡改），否则一律用 { mode: 'open' }。闭源模式不是安全机制，只是增加一层访问门槛，真想绕过并不难。
影子树内样式和事件必须限定作用域，否则查不到也绑不上
即使你看到了 #shadow-root 并确认结构存在，也可能遇到「样式没生效」「点击没反应」——大概率是因为没意识到 Shadow DOM 是独立作用域。
典型错误包括：
- 在外部
<style></style>里写my-button div { ... }→ 不生效，外部样式进不去 - 用
document.querySelector('button')想取 shadow 内的按钮 → 查不到，得用el.shadowRoot.querySelector('button') - 给宿主元素绑 click，却期望响应 shadow 内部按钮的冒泡 → 可以，但若用了
event.stopPropagation()就断了
真正起作用的是：
-
:host—— 控制宿主元素自身样式（如<my-button class="large"></my-button>对应:host(.large)） -
::slotted(*)—— 重置插槽内容的默认边距（否则外层传进来的<p></p>可能塌陷） - 所有
<style></style>必须放在 shadow root 内部，不能靠外部 link 或全局 style 标签
最容易被忽略的一点：DOM 查询和事件监听，只要涉及 shadow 内部节点，就必须显式通过 .shadowRoot 进入，没有捷径。漏掉这个“入口”，就等于在门口转圈。
