Chrome与Firefox在Document Fragment插入前后控制台输出差异咨询

现象细节 #

• 插入DOM场景：
  • Chrome控制台会输出空的Document Fragment（插入前、插入后均为空）
  • Firefox插入前输出非空片段，插入片段到DOM后输出空片段
• 未插入DOM场景：Chrome和Firefox控制台都会输出非空的Document Fragment

测试环境：Chrome 126、Firefox 128（均为最新稳定版）

测试代码 #

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>template test</title>
</head>

<body>
  <div class="container">
    <div class="bar">
      <button type="button">插入前输出片段，插入后再次输出</button>
      <button type="button">仅输出片段不插入</button>
    </div>
    <div class="list">
      <ul>
        <template>
          <li>列表项</li>
        </template>
      </ul>
    </div>
  </div>
</body>

</html>

CSS

.container {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.bar {
  flex-basis: max-content;
  display: flex;
  padding: 6px;
  gap: 6px;
}

.list {
  overflow: auto;
  border: 1px solid;
}

button {
  text-align: left;
}

JavaScript

const init = function() {
  let fn0 = function() {
    let fragment = document.querySelector('template').content.cloneNode(true);
    console.log('插入前: ', fragment); // Chrome输出空，Firefox输出非空
    document.querySelector('ul').append(fragment);
    console.log('插入后: ', fragment);
  };
  let fn1 = function() {
    let fragment = document.querySelector('template').content.cloneNode(true);
    console.log('未插入: ', fragment); // 两者均输出非空
  };
  let buttons = document.getElementsByTagName('button');
  buttons[0].addEventListener('click', fn0);
  buttons[1].addEventListener('click', fn1);
};
window.addEventListener('load', init);

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