为何无法克隆template标签内的li元素？

你的代码里tmpl.content.cloneNode(true)其实已经成功克隆了内容，核心问题出在对<template>的content属性特性不熟悉：

1. <template>的content返回的是DocumentFragment（文档片段）——这是一种轻量的DOM容器，本身不会出现在最终渲染的DOM树里。当你在template里直接写<li>时，这个<li>是被包裹在DocumentFragment中的，所以克隆后的cloned变量是这个片段容器，而非直接的<li>元素。
2. 你觉得“无法生效”，大概率是没把克隆后的片段插入DOM，或是没正确从片段中取出目标<li>。

正确使用方式 #

方式1：直接将片段插入DOM #

如果要把<li>添加到页面的列表（比如<ul id="list">）中，直接将克隆后的片段插入即可，浏览器会自动把片段内的子元素（即<li>）挂载到目标节点下：

const tmpl = document.getElementById("tmpl");
const cloned = tmpl.content.cloneNode(true);
document.getElementById("list").appendChild(cloned);

方式2：从片段中取出<li>元素 #

如果需要单独获取克隆后的<li>，可以通过片段的firstElementChild或querySelector拿到：

const tmpl = document.getElementById("tmpl");
const clonedFragment = tmpl.content.cloneNode(true);
const clonedLi = clonedFragment.firstElementChild; // 拿到目标<li>
// 后续可直接操作该元素，比如插入DOM
document.getElementById("list").appendChild(clonedLi);

补充说明 #

浏览器解析<template>内容时，不会做常规DOM结构校验（比如<li>必须嵌套在<ul>/<ol>中），所以你的template写法是完全合法的，只是需要适配DocumentFragment的使用逻辑。

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