如何检测指定元素中是否存在关闭状态的Shadow Root？

为什么常规方法返回null？ #

关闭模式（closed）的Shadow Root是浏览器的刻意设计——外部JavaScript无法直接获取它的引用，所以调用元素的.shadowRoot或getRootNode()都会返回null，这是正常行为。

间接检测方法 #

因为一个DOM元素只能挂载一个Shadow Root（无论模式是open还是closed），我们可以通过尝试重新挂载Shadow Root，利用抛出的错误来间接判断：

const targetEl = document.querySelector('.jest');
let hasClosedShadowRoot = false;

try {
  // 尝试给元素挂载新的Shadow Root
  targetEl.attachShadow({ mode: 'open' });
} catch (error) {
  // 如果元素已挂载过Shadow Root，会抛出InvalidStateError
  if (error.name === 'InvalidStateError') {
    hasClosedShadowRoot = true;
  }
}

console.log(hasClosedShadowRoot); // 存在closed Shadow Root时返回true

这个方法的逻辑是：如果元素已经有了Shadow Root（不管是open还是closed），再次调用attachShadow就会触发InvalidStateError。结合你已经确认.shadowRoot返回null的情况，就能确定这个Shadow Root是关闭状态的。

其他局限性方法（仅供参考） #

• 布局尺寸判断：如果Shadow Root内有元素会影响宿主的布局（比如例子中的<br>、<input>），可以对比宿主元素的getBoundingClientRect()尺寸和空元素的预期尺寸，但如果Shadow Root为空或样式不影响布局，这个方法就失效。
• 手动调试：在Chrome DevTools的Elements面板中，可以直接看到标注为#shadow-root(closed)的节点，这是最直观的手动检测方式，但无法通过代码自动化实现。

内容的提问来源于stack exchange，提问作者Saavi Varshney