Javascript 创建一个类实例作为html元素

我想创建一个动态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)
    }

``

使用 真正归功于@Guerric p

直到今天，我才听说过Web组件（在这种情况下）。我必须说，我根据你的代码和Guerric P提供的文档快速创建了一个示例。您的代码实际上非常接近。我把它清理了一点，但它和你的差不多

你的想法背后不仅有坚实的思想，实际上它是一种等待实现的HTML5技术

类灯泡扩展HTMLElement{
状态=假；
/**
*@param{String}id
*/
建造师（id）{
超级（）；
this.id=id；
this.addEventListener（“单击”，this.toggleState）；
}
切换状态（）{
this.state=！this.state；
this.classList.toggle（“打开”，this.state）；
}
}
自定义元素。定义（“灯泡”，灯泡）
灯泡打开{
背景颜色：黄色；
}
可点击灯泡
您应该看看，非常感谢！老实说，这看起来是相同的原则，不是吗？所以，是的，它是：-D无法提前找到它。。。需要提高我的搜索技能…非常感谢！！！只是工作完美！谢谢你的信任，投了赞成票！