如何用Mutation Observer检测动态加载的Shadow DOM

问题：页面存在动态创建的Shadow DOM，已为文档添加Mutation Observer，但无法捕获Shadow DOM的插入事件，需要在Shadow DOM加载时完成检测。尝试通过重载HTMLElement.prototype.attachShadow来监听Shadow DOM的创建，需确保逻辑在页面加载流程中生效，本例中Shadow DOM会被添加到<div id="shadowHost">元素上。

解决方案：拦截attachShadow并实时监听Shadow Root #

常规Mutation Observer仅能监听主DOM树的变化，无法穿透Shadow DOM的隔离边界。要实现Shadow DOM的创建检测及内部变化监听，需拦截attachShadow方法，在Shadow Root创建的同时为其绑定Observer。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>监听Shadow DOM创建与变化</title>
</head>
<body>
  <button onclick="createIframe('./embedded_form.html')">加载Iframe</button>
  <button id="createShadowDomButton">创建Shadow DOM</button>
  <div id="shadowHost"><p>hello</p></div>

  <script>
    // 先创建Shadow DOM专用的Mutation Observer实例，避免变量未定义问题
    function logShadowMutations(records) {
      for (const record of records) {
        if (record.type === "childList") {
          console.log(`Shadow DOM内部子节点变化:`, record);
        }
      }
    }
    const shadowObserver = new MutationObserver(logShadowMutations);

    // 重载attachShadow方法，拦截Shadow Root创建流程
    const originalAttachShadow = HTMLElement.prototype.attachShadow;
    HTMLElement.prototype.attachShadow = function(options) {
      // 调用原生方法创建Shadow Root
      const shadowRoot = originalAttachShadow.call(this, options);
      console.info(`已创建${options.mode}模式Shadow DOM，宿主元素:`, this);
      
      // 为新Shadow Root绑定Observer，监听内部子节点变化
      shadowObserver.observe(shadowRoot, { 
        childList: true,
        subtree: true // 可选：开启后可监听Shadow DOM深层子节点的变化
      });
      
      return shadowRoot;
    }
  </script>

  <script>
    // 主DOM树的Mutation Observer（可选，用于监听主DOM的节点变化）
    function logMainDomChanges(records) {
      for (const record of records) {
        if (record.type === "childList") {
          console.log(`主DOM树子节点变化:`, record);
        }
      }
    }
    const mainObserver = new MutationObserver(logMainDomChanges);
    mainObserver.observe(document.body, { childList: true });
  </script>

  <script>
    // 创建Shadow DOM的示例函数
    function createShadowDOM() {
      const shadowHost = document.getElementById("shadowHost");
      if (shadowHost.attachShadow) {
        const shadowRoot = shadowHost.attachShadow({ mode: "open" });
        
        const style = document.createElement("style");
        style.textContent = `
          div {
            background-color: lightgray;
            padding: 10px;
            border: 1px solid gray;
          }
        `;
        shadowRoot.appendChild(style);

        const shadowDiv = document.createElement("div");
        shadowDiv.textContent = "这是一个Shadow DOM元素!";
        shadowRoot.appendChild(shadowDiv);

        // 模拟Shadow DOM内部动态添加元素，验证Observer捕获能力
        setTimeout(() => {
          const newP = document.createElement("p");
          newP.textContent = "动态添加的子元素";
          shadowRoot.appendChild(newP);
        }, 1000);
      } else {
        console.error("当前浏览器不支持Shadow DOM");
      }
    }

    // 绑定按钮点击事件
    document.getElementById("createShadowDomButton").addEventListener("click", createShadowDOM);
  </script>
</body>
</html>

关键说明 #

1. 变量顺序调整：先创建Mutation Observer实例，再重载attachShadow，解决原代码中observer未定义的报错问题。
2. Shadow Root实时监听：在拦截attachShadow时，立刻为新创建的shadowRoot绑定Observer，确保Shadow DOM一创建就能被检测到，subtree: true可按需开启以监听深层节点变化。
3. DOM树分离监听：主DOM与Shadow DOM的Observer独立工作，分别处理各自DOM树的变化逻辑。

效果验证 #

点击「创建Shadow DOM」按钮后，控制台会输出：

• Shadow DOM创建的日志信息
• Shadow DOM内部添加style、div元素的变化记录
• 1秒后动态添加p元素的变化记录

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