使用 `clonenode(true)` 克隆含嵌套自定义元素的 web component 时，子组件不会自动升级（即未触发 `connectedcallback`），导致内容空白；根本解法是手动遍历并强制升级所有未定义的自定义元素。
在 Vanilla JS 中开发 Web Components 时，一个常见却容易被忽视的问题是：克隆（cloneNode(true)）一个包含嵌套自定义元素的组件后，内部子组件无法正常渲染。这是因为浏览器仅对首次插入 DOM 的自定义元素自动执行升级（upgrade）流程（即调用 constructor → connectedCallback）；而克隆产生的节点属于“已创建但未升级”的状态——它们拥有正确的标签名和属性，但尚未被 Custom Elements Registry 识别，因此 connectedCallback 不会触发，内部结构也不会被初始化。
例如，你有如下嵌套结构：
<component1 id="1">
<component2>
<component3></component3>
</component2>
</component1>执行以下操作后：
const original = document.querySelector('#1');
const clone = original.cloneNode(true);
document.getElementById('newDiv').appendChild(clone);结果中 <component2> 和 <component3> 标签虽存在，但仍是未定义的 HTMLUnknownElement，其 connectedCallback 完全未执行，视觉上表现为内容缺失或空白。
✅ 正确解法：克隆后递归遍历所有自定义标签，并显式调用 customElements.upgrade()
function upgradeClonedNode(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
// 检查是否为已注册的自定义元素（且尚未升级）
if (customElements.get(node.localName) && !node.hasAttribute('is-upgraded')) {
customElements.upgrade(node);
node.setAttribute('is-upgraded', 'true'); // 避免重复升级
}
// 递归处理子节点
for (const child of node.children) {
upgradeClonedNode(child);
}
}
}
// 使用示例
const original = document.querySelector('#1');
const clone = original.cloneNode(true);
upgradeClonedNode(clone); // 关键：主动升级所有嵌套自定义元素
document.getElementById('newDiv').appendChild(clone);⚠️ 注意事项：
- insertAdjacentHTML（如答案中建议）不能替代此方案：它会将 HTML 字符串解析为原生元素，丢失原有组件实例、事件监听器、数据绑定及 Shadow DOM 结构，仅适用于纯静态模板插入，不适用于需要保留行为与状态的组件克隆。
- customElements.upgrade(element) 是标准 API（MDN 文档），安全可靠，兼容所有现代浏览器（Chrome 54+、Firefox 63+、Safari 10.1+）。
- 若组件依赖 attributeChangedCallback，请确保克隆前已设置关键属性（clone 不会触发该回调，需手动调用或重新赋值）。
- 对于 Shadow DOM 组件，upgrade() 同样适用，它会正确初始化 shadowRoot 及内部逻辑。
? 进阶提示：可封装为通用工具函数，结合 MutationObserver 实现动态插入后的自动升级，提升大型组件树的鲁棒性。
总之，Web Components 的克隆不是“深拷贝即开箱即用”，而是需要开发者主动参与生命周期管理。理解并正确运用 customElements.upgrade()，是构建可复用、可组合 Vanilla Web Component 架构的关键一环。
