求助：用Vanilla JS实现自定义组件100次渲染及删除、变色功能

我来帮你搞定这个需求！你当前的代码里自定义元素只负责生成单个组件，批量创建100个实例的逻辑应该放在自定义元素定义之外，同时我们还要补上删除按钮和点击变色的功能。下面是完整的可运行代码，我会一步步解释修改点：

<div id="container"></div>

<script>
class ElementList extends HTMLElement {
  constructor() {
    super();
    this.index = 0; // 用来标记组件的序号
  }

  connectedCallback() {
    // 创建组件的主体容器
    this.div = document.createElement('div');
    this.div.textContent = `我是第 ${this.index} 个组件`;
    // 给组件加基础样式，方便区分
    this.div.style.padding = '8px';
    this.div.style.margin = '4px 0';
    this.div.style.border = '1px solid #ccc';

    // 创建删除按钮并绑定事件
    this.deleteBtn = document.createElement('button');
    this.deleteBtn.textContent = '删除我';
    this.deleteBtn.addEventListener('click', () => {
      this.remove(); // 点击后直接移除当前组件
    });

    this.div.appendChild(this.deleteBtn);
    this.appendChild(this.div);

    // 判断是否为第3个组件，添加点击变色功能
    if (this.index % 3 === 0) {
      this.div.addEventListener('click', () => {
        // 切换背景色
        this.div.style.backgroundColor = this.div.style.backgroundColor === 'lightblue' 
          ? '' 
          : 'lightblue';
      });
      // 给第3个组件加蓝色边框做标识
      this.div.style.borderColor = 'blue';
    }
  }

  // 监听index属性变化，更新组件内容
  static get observedAttributes() {
    return ['index'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'index') {
      this.index = parseInt(newValue);
      if (this.div) {
        this.div.textContent = `我是第 ${this.index} 个组件`;
      }
    }
  }
}

// 注册自定义元素
customElements.define('element-list', ElementList);

// 批量生成100个组件
const container = document.getElementById('container');
let counter = 1;
while (counter <= 100) {
  const element = document.createElement('element-list');
  element.setAttribute('index', counter); // 设置序号属性
  container.appendChild(element);
  counter++;
}
</script>

关键修改点说明： #

• 批量生成逻辑：把循环放在自定义元素定义之外，通过document.createElement('element-list')创建100个组件实例，逐个添加到页面容器中。你之前错误地把循环放在了自定义元素内部，这不符合自定义元素“单个组件模板”的定位。
• 删除按钮功能：给每个组件的删除按钮绑定点击事件，调用this.remove()直接从DOM中移除当前组件。
• 每第3个组件变色：通过给每个组件设置index属性，判断index % 3 === 0来识别第3、6、9...个组件，给这些组件添加点击切换背景色的事件，同时用蓝色边框做视觉区分。
• 组件序号显示：通过监听index属性的变化，动态更新组件的文本内容，让每个组件的序号清晰可见。

如果你习惯用for循环，也可以把批量生成的代码改成这样，效果完全一致：

for (let counter = 1; counter <= 100; counter++) {
  const element = document.createElement('element-list');
  element.setAttribute('index', counter);
  container.appendChild(element);
}

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