Script标签中断Template标签的Mutation Observer监听问题

你遇到的问题确实是HTML解析器的特性导致的：当解析器遇到<script>标签时，会暂停DOM解析去执行脚本（除非脚本带async/defer属性），此时<template>标签已被添加到DOM中，MutationObserver会提前捕获到它，但内部后续内容还未解析完成。

一、判断template完全加载的方法 #

1. 微任务延迟处理 #

通过Promise.resolve().then()将处理逻辑放到微任务队列，等待HTML解析器完成<template>内部剩余内容的解析后再执行：

const upgradeNewNodes = (mutationRecords) => {
  mutationRecords.forEach((mutationRecord) => {
    mutationRecord.addedNodes.forEach((newNode) => {
      if (newNode.matches?.('template')) {
        Promise.resolve().then(() => {
          console.log([...newNode.content.childNodes].map(child => child.nodeName));
        });
      }
    });
  });
};

2. 使用requestIdleCallback #

让浏览器在空闲时执行处理逻辑，既确保解析完成，又不会阻塞主线程：

const upgradeNewNodes = (mutationRecords) => {
  mutationRecords.forEach((mutationRecord) => {
    mutationRecord.addedNodes.forEach((newNode) => {
      if (newNode.matches?.('template')) {
        requestIdleCallback(() => {
          console.log([...newNode.content.childNodes].map(child => child.nodeName));
        });
      }
    });
  });
};

二、其他捕获新增template标签的方式 #

1. 劫持document.createElement #

如果需要覆盖JS动态创建的<template>，可以劫持原生创建方法：

const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const elem = originalCreateElement.call(this, tagName);
  if (tagName.toLowerCase() === 'template') {
    requestIdleCallback(() => {
      console.log([...elem.content.childNodes].map(child => child.nodeName));
    });
  }
  return elem;
};

注意：仅能捕获通过document.createElement创建的模板，无法覆盖HTML直接解析或innerHTML插入的场景。

2. 监听DOMContentLoaded（仅适用于初始页面模板） #

如果只需要处理页面初始加载的<template>，可在DOM加载完成后遍历所有模板：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('template').forEach(template => {
    console.log([...template.content.childNodes].map(child => child.nodeName));
  });
});

此方式无法处理后续动态添加的模板。

最通用可靠的方案是基于MutationObserver结合延迟处理（微任务或requestIdleCallback），既能捕获所有新增的<template>，又能确保拿到完整的内部内容。

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