JavaScript中如何移除并重新渲染初始化WebComponent？

你现有写法的问题出在三个核心点：

1. cloneNode(true) 只会复制DOM结构、HTML属性，不会复制通过addEventListener绑定的事件监听器，也不会重新执行自定义元素的constructor初始化逻辑，这是事件监听器失效的直接原因。
2. 你采用“先追加克隆节点、再删除旧节点”的顺序，当克隆的自定义元素被插入DOM树时，会立刻触发connectedCallback执行内部render()逻辑，此时旧节点还未被移除，页面上会同时存在两个同组件节点，等后续执行删除操作时，就容易出现多删、重复渲染的问题。
3. 整个替换流程绕开了自定义元素的标准初始化流程，相当于硬拷贝DOM结构，组件内部依赖生命周期执行的状态初始化、事件绑定逻辑自然会出现异常。

根据实际需求选对应方案即可：

场景1：需要完全销毁旧实例，重新初始化全新组件 #

不要用cloneNode，直接通过createElement创建全新的组件实例，用原生replaceWith完成原子替换，避免出现中间态的重复DOM：

// 如果组件是在modal-element的shadowRoot内部，用这行获取元素列表
const selectElements = document.querySelector('modal-element').shadowRoot.querySelectorAll('custom-select-element');

selectElements.forEach(oldEl => {
  // 创建全新的自定义元素实例，会完整走constructor、connectedCallback全生命周期
  const newEl = document.createElement('custom-select-element');
  // 需要保留旧元素上的HTML属性（比如data-*、id、class这类），手动同步即可
  Array.from(oldEl.attributes).forEach(attr => {
    newEl.setAttribute(attr.name, attr.value);
  });
  // 原子替换：自动在原位置移除旧元素、插入新元素，不会出现中间态重复DOM
  oldEl.replaceWith(newEl);
});

这种写法下，新组件的初始化、事件绑定、render逻辑都会按组件定义正常执行，不会出现监听器丢失、重复DOM的问题。

场景2：不需要销毁组件实例，仅需重置内容重渲染 #

如果你的组件本身已经封装了render逻辑，完全没必要销毁重建DOM，给组件加公开的重置方法性能更好，也不会有实例销毁重建的开销：
首先在自定义元素内部定义重置逻辑，优先用事件委托减少重复绑定：

class CustomSelectElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 事件优先委托在shadowRoot上，后续内部DOM重渲染不需要重新绑定
    this.shadowRoot.addEventListener('change', (e) => {
      // 处理选择逻辑，不管内部选项怎么重渲染，事件都能正常触发
    });
  }

  connectedCallback() {
    this.render();
  }

  // 公开重置方法，外部直接调用即可
  reset() {
    // 清空内部渲染的旧内容
    this.shadowRoot.innerHTML = '';
    // 重新拉取数据、执行渲染
    this.render();
  }

  render() {
    // 你的组件渲染逻辑，比如生成选项DOM、插入shadowRoot
  }
}
customElements.define('custom-select-element', CustomSelectElement);

外部需要重渲染的时候，直接调用重置方法即可，不需要操作DOM替换：

const selectElements = document.querySelector('modal-element').shadowRoot.querySelectorAll('custom-select-element');
selectElements.forEach(el => el.reset());

• 不要用cloneNode处理有交互、有生命周期的自定义元素，它的设计目标是复制静态DOM结构，不会处理事件、组件实例状态这类逻辑。
• 做DOM节点替换优先用replaceWith、replaceChildren这类原生原子API，不要写“先追加新节点、再删旧节点”的分步逻辑，避免出现中间态导致的重复渲染、事件绑定异常。
• 自定义元素内部的事件绑定优先用委托模式，绑在组件根节点或者shadowRoot上，后续不管内部DOM怎么重渲染，都不需要重复绑定监听器，从根源上避免事件丢失问题。
• 如果确实需要手动绑定事件到动态生成的内部节点，记得每次render完成后先解绑旧的监听器，再绑定新的，避免内存泄漏。

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