如何正确克隆并插入嵌套的自定义 Web 组件（Vanilla JS）

在 vanilla js 中克隆含嵌套自定义元素的 web component 时，`clonenode(true)` 无法触发子组件的 `connectedcallback`，导致内部组件未升级、内容丢失；需结合 `insertadjacenthtml` 或手动强制升级来解决。

Web Components 的生命周期依赖 dom 插入时机：只有当元素被实际附加到活动文档（live document）中时，浏览器才会调用其 connectedCallback() 并完成自定义元素升级（upgrade）。而 clonenode(true) 仅复制节点树结构，不会重新触发生命周期钩子，更不会对克隆出的子自定义元素执行升级——这就是你看到 和 在克隆后“消失”或空白的根本原因。

✅ 正确做法：避免纯 cloneNode，改用 html 字符串 + 重解析

推荐使用 element.outerHTML 提取完整结构，再通过 insertAdjacentHTML 插入目标容器。该方式会触发浏览器重新解析 HTML，从而让所有嵌套自定义元素正常注册与升级：

const original = document.querySelector('#1'); const wrapper = document.getElementById('newDiv');  // ✅ 安全克隆：提取 HTML 字符串并重新注入 wrapper.insertAdjacentHTML('beforeend', original.outerHTML);  // ✅ 可选：确保新插入节点立即升级（兼容性兜底） customElements.upgrade(wrapper.lastElementChild);

⚠️ 注意：outerHTML 会保留原始 id=”1″，若需唯一性，请在插入前动态修改 ID（例如用 replace(/id=”([^”]+)”/g, ‘id=”clone-$1″‘)），避免 ID 冲突。

❌ 为什么 cloneNode(true) 不适用？

const cloned = original.cloneNode(true); // ❌ 子组件仍为未升级的 HTMLElement 实例 wrapper.appendChild(cloned); // ❌ connectedCallback 不会再次调用

此时 在 DOM 中仍是未注册的普通标签（document.createElement(‘component2’) 的原始状态），其 connectedCallback 永远不会自动执行，除非你手动调用 customElements.upgrade()。

✅ 进阶方案：手动升级克隆树（适合复杂逻辑）

若必须使用 cloneNode（如需保留事件监听器引用），可递归升级所有自定义子元素：

function upgradeClonedNode(node) {   if (node.nodeType === Node.ELEMENT_NODE) {     customElements.upgrade(node);     node.childNodes.forEach(upgradeClonedNode);   } }  const cloned = original.cloneNode(true); wrapper.appendChild(cloned); upgradeClonedNode(cloned); // ✅ 强制升级整棵克隆子树

? 补充：你的 ActionBlock 组件可优化为

class ActionBlock extends HTMLElement {   connectedCallback() {     const id = this.getAttribute('data-id') || Date.now();     // 使用模板字符串替代字符串 replace，更安全清晰     this.innerHTML = `       
         
           
           
             
             
                              Define Action             
           
         
         
           
                        
                    
       
     `;   } } customElements.define('action-block', ActionBlock);

✅ 总结

始终记住：Web Components 的生命始于 DOM 插入，而非内存克隆。 优先让浏览器重新解析 HTML，是最符合规范、最可靠的方式。