如何获取closed模式shadow-root内部的iframe元素？

原有方案失效原因 #

• 全局document.querySelector仅能遍历主文档DOM树，无法穿透Shadow DOM的隔离边界，无论Shadow Root是open还是closed模式，主文档的全局选择器都无法直接查询到Shadow内部的元素。
• closed模式设计上会屏蔽外部对Shadow Root的访问：宿主元素的shadowRoot属性会固定返回null，你无法像open模式那样直接拿到根节点做内部查询。
• 你之前执行的查询逻辑全部运行在主文档上下文，自然无法定位到藏在closed Shadow内部的iframe节点。

可行方案 #

方案1：原生方法劫持（适用于自动化脚本、油猴脚本、自定义注入脚本场景） #

该方案必须在目标元素调用attachShadow创建Shadow Root之前执行，才能拦截到closed模式的根节点引用：

// 缓存原生attachShadow方法
const originalAttachShadow = Element.prototype.attachShadow;
// 用WeakMap存储元素与对应Shadow Root的映射，避免内存泄漏
const shadowRootMap = new WeakMap();

// 重写原生挂载方法
Element.prototype.attachShadow = function(config) {
  const root = originalAttachShadow.call(this, config);
  shadowRootMap.set(this, root);
  return root;
};

等页面完成渲染后，先定位到Shadow Root对应的宿主元素（即DOM结构中#shadow-root (closed)标识的直接父节点），再从缓存中拿到closed Shadow Root，最后在根节点内查询目标iframe：

// 替换为实际的Shadow宿主元素选择器
const shadowHost = document.querySelector('对应shadow宿主的CSS选择器');
const closedShadowRoot = shadowRootMap.get(shadowHost);
// 此时即可在Shadow内部查询到目标iframe
const targetIframe = closedShadowRoot.querySelector("iframe[style*='display:block']");

配置提示：用油猴脚本实现时需要把@run-at参数设为document-start，保证劫持逻辑在页面业务脚本运行前生效；用Chrome扩展实现时需要把脚本注入到页面主世界（MAIN world），隔离世界下的重写不会作用到页面原生上下文。

方案2：DevTools临时调试场景 #

如果只是临时调试获取元素，不需要做自动化逻辑，直接打开浏览器开发者工具的Elements面板，逐层展开DOM树到closed Shadow Root内部的iframe节点，右键选择「Store as global variable」，控制台会自动生成名为temp1/temp2的全局变量指向该iframe，直接在控制台调用该变量即可。

注意事项 #

• 拿到iframe元素后，调用innerHTML无法获取iframe内部加载的文档内容，需要等iframe触发load事件后，通过targetIframe.contentDocument才能访问iframe内部DOM；跨域iframe受同源策略限制，普通页面脚本无法直接读取其内部内容。
• 如果目标closed Shadow已经完成挂载，你再注入上述劫持代码是无效的，普通页面脚本没有官方提供的方法可以穿透已创建的closed Shadow边界访问内部元素。

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