默认情况下DevTools不显示Shadow DOM是设计使然，需手动启用“Show user agent shadow DOM”选项或确保组件使用mode:'open'；自定义组件须调用this.attachShadow({mode:'open'})并在Elements面板右键选择Break on→subtree modifications来调试。
Shadow DOM 节点在 DevTools 里为什么看不到？
默认情况下，Chrome / Edge / Safari 的开发者工具不会展开 Shadow DOM 内部节点——这不是 bug，是设计使然。它只在你显式启用「Show user agent shadow DOM」或组件使用 mode: 'open' 且被主动展开时才可见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Settings → Preferences → 勾选
Show user agent shadow DOM（仅影响原生元素如<input type="date">） - 对自定义组件，确保构造函数中调用的是
this.attachShadow({mode: 'open'})，而非'closed' - 在 Elements 面板中右键目标自定义元素（如
<shadow-card>），选择Break on > subtree modifications可捕获内部 DOM 变更 - 直接在 Console 中执行
document.querySelector('shadow-card').shadowRoot查看结构，shadowRoot.querySelectorAll('.title')验证选择器作用域
如何监控 Shadow DOM 渲染耗时与重排？
Shadow DOM 内部的样式和布局是独立计算的，但它的渲染仍会参与主文档的 layout/paint 流程。单纯靠 performance.now() 打点不够精准，需结合浏览器原生指标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
PerformanceObserver监听layout-shift类型，配合entry.sourceElement判断是否来自 Shadow DOM 内部元素（注意：CLS 指标本身不区分来源，需手动过滤） - 在组件
connectedCallback中启动requestIdleCallback并记录performance.now()，对比render完成后到首次paint的延迟 - 避免在
shadowRoot.innerHTML = ...后立刻读取offsetHeight—— 这会强制同步 layout，推荐改用getComputedStyle(element).height或监听resize事件 - 对高频更新组件（如带进度条的
<custom-progress>），启用 CSS Containment：shadowRoot.firstElementChild.style.contain = 'layout paint style'
为什么 getComputedStyle 在 Shadow DOM 里返回空字符串？
这是最常见的误用：你在外部 JS 中对 Shadow DOM 内部元素调用 getComputedStyle，却传入了外部 DOM 节点引用（比如从 shadowRoot.querySelector 拿到的元素，但错误地用主文档的 document 去调用）。
关键点在于上下文一致性：
-
getComputedStyle必须由该元素所属的 document 或 shadowRoot 的 ownerDocument 调用 —— 对 Shadow DOM 内部元素，应直接在其上执行，例如：const el = shadowRoot.querySelector('.card'); getComputedStyle(el) - 不要跨上下文：不能用
document.body.ownerDocument.defaultView.getComputedStyle(el)，这会丢失 shadow boundary 上的样式继承链 - 若需获取伪元素样式（如
::before），必须传入第二个参数字符串，且该字符串需在 Shadow DOM 内部样式表中真实存在：getComputedStyle(el, '::before') - 注意兼容性：Firefox 对 Shadow DOM 内
getComputedStyle的支持比 Chrome 稍晚，2025 年后版本已无差异
性能瓶颈常藏在 slot 和 ::slotted 的组合里
Slot 分发本身不慢，但当大量内容通过 <slot> 注入，又叠加 ::slotted(*) 全局样式穿透时，浏览器需为每个分发节点重复计算样式，极易触发强制同步重排。
优化方向很具体：
- 避免
::slotted(*)；改用具名 slot + 明确选择器，如::slotted([slot='title']) - 不在
::slotted中使用position: absolute或transform，这些会破坏 slot 分发后的布局缓存 - 如果插槽内容复杂（如含 SVG 或 canvas），在
slotchange事件回调中用requestIdleCallback延迟初始化，而非在connectedCallback中立即操作 - 对动态 slot 场景（如 tab 切换后才显示内容），考虑用
display: contents替代display: none隐藏，减少 layout tree 重建开销
