Javascript 如何使用Vanilla JS创建和显示自定义组件100次

亲爱的

我有一个任务，创建自定义HTML组件，显示它100次，添加按钮，这将删除它，而且每第三个组件应该是可点击的，并改变颜色点击。 到目前为止，我有这个

但我无法正确放置while循环，因此它会显示100次

你能帮帮我吗，我正在这里学习：

---

您正在用代码定义一个自定义元素，它表示对象的一个实例。现在要创建多个，只需在类定义之外使用基本javascript，如下面的代码所示

class ElementList扩展了HtmleElement{
构造函数（）{
超级（）；
const div=''；
常数btn=“”；
}
connectedCallback（）{
this.div=document.createElement（'div'）；
this.div.innerHTML='i am div'；
this.btn=document.createElement（'button'）；
this.btn.innerHTML='单击我'；
this.div.appendChild（this.btn）；
this.appendChild（this.div）；
}
}
自定义元素。定义（'element-list'，ElementList）；
对于（设i=0；i您正在用代码定义一个自定义元素，它表示对象的一个实例。现在要创建多个实例，只需在类定义之外使用基本javascript，如下面的代码所示

class ElementList扩展了HtmleElement{
构造函数（）{
超级（）；
const div=''；
常数btn=“”；
}
connectedCallback（）{
this.div=document.createElement（'div'）；
this.div.innerHTML='i am div'；
this.btn=document.createElement（'button'）；
this.btn.innerHTML='单击我'；
this.div.appendChild（this.btn）；
this.appendChild（this.div）；
}
}
自定义元素。定义（'element-list'，ElementList）；
for（让i=0；i作为旁注如果要使用参数创建对象，可以将for循环的第一行更改为：let item=new ElementList（）；旁注如果要使用参数创建对象，可以将for循环的第一行更改为：let item=new ElementList（）；
class ElementList extends HTMLElement {
  constructor() {
    super();
    let counter = 100;
    const div = '';
    const btn = '';
   }
  connectedCallback() {
    this.div = document.createElement('div');
    this.div.innerHTML = 'i am div';
    this.btn = document.createElement('button');
    this.btn.innerHTML = 'Click me';
    this.div.appendChild(this.btn);
    this.appendChild(this.div); 
  }
}
customElements.define('element-list', ElementList);