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

Question

亲爱的，

我的任务是创建自定义 HTML 组件，将其显示 100 次，向其添加按钮，这将删除它，并且每个第 3 个组件都应该可以点击并在点击时改变颜色。到目前为止我有这个 https://codepen.io/GosiaPtak/pen/abOZmyq

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);

但我无法正确放置 while 循环，所以它会显示 100 次。

你能帮帮我吗，我正在从这里学习：https://javascript.info/custom-elements

亲切的问候，

Answer 1

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

class ElementList extends HTMLElement {
  constructor() {
    super();
    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);

for(let i = 0; i <= 100; i++) {
  let item = document.createElement('element-list');
  document.body.appendChild(item);
}

通过这个 for 循环和一个您可以传递给您的对象的参数，您可以意识到每三分之一都应该是可点击的。

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

How to create and display custom component 100 times using Vanilla JS

javascript

custom-component

html-components