为何template标签内的节点isConnected属性值为false？

template标签内的div节点可通过tmpl.content.children[0].ownerDocument确认属于当前文档，但依据DOM规范中connected节点的定义，该节点的isConnected属性值却为false，这是什么原因？

代码示例 #

const html = `
  <template id="tmpl">
    <div>a</div>
  </template>
`;
document.body.innerHTML = html;

console.log(tmpl.content.children[0].isConnected);

原因解析 #

• template元素的content属性对应的是一个DocumentFragment（文档片段），这个片段确实属于当前文档，所以节点的ownerDocument会指向当前文档对象。
• 但isConnected属性的判断标准是：节点是否处于当前文档的活跃DOM树中（即是否和文档的根节点<html>存在直接或间接的连接关系）。
• 你代码里的div节点存在于template的content片段里，而这个片段只是作为template的内部存储容器，并没有被插入到页面的DOM树中，所以这个div并没有和文档根节点形成连接链路，因此isConnected返回false。

简单总结：ownerDocument只表示节点归属的文档，而isConnected要看节点是否真正挂载到了该文档的活跃DOM结构里，template的内容是被隔离在未挂载的片段中的，所以会出现这种情况。

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