创建一个类实例作为html元素[重复]

Question

我想创建一个动态的 HTML/JS 用户界面。 为此，我将动态创建对象，这些对象将在我的 html 中表示为一个按钮。 现在，我当然想跟踪点击事件。 如何动态地将 addEventlistener 添加到这个特殊的按钮实例？ （每个按钮创建自己的 svg 图标） 我的想法是，对象是按钮，但我不知道该怎么做......

我的想法如下：

class Lightbulb {
    /**
     * 
     * @param {String} id
     * @param {boolean} state 
     */
    constructor(id, state){
        this.id = id;
        this.state = state;
        /*
            create the icon here...
        */
        
        //is it somehow possible to achieve the following?
        this.addEventlistener("click", this.setState(!this.state));
    }
    /**
    *
    * {boolean} newState
    */
    setState(newState){
        console.log(newState)
    }

``

Answer 1

使用Web Components

@Guerric P 的真正功劳

直到今天，我才听说过 Web 组件（在这种情况下）。我不得不说，我根据您的代码和 Guerric P 提供的文档编写了一个示例。您的代码实际上非常接近。我把它清理了一下，但它几乎和你的一样。

您的想法不仅背后有扎实的思想，它实际上是一项等待实施的 HTML5 技术。

class Lightbulb extends HTMLElement {
  state = false;
  /**
   * @param {String} id
   */
  constructor(id) {
    super();
    this.id = id;

    this.addEventListener("click", this.toggleState);
  }

  toggleState() {
    this.state = !this.state;
    this.classList.toggle("on", this.state);
  }
}

customElements.define("light-bulb", Lightbulb);

light-bulb.on {
  background-color: yellow;
}

<light-bulb>Clickable Lightbulb</light-bulb>