js-如何创建自定义组件

js-创建自定义组件

首先，我们需要先创建一个独立元素：

<my-element> </my-element>
class MyElement extends HTMLElement{
   
    //dom元素都继承于HTMLElement，因此我们自定义的元素也应该继承于HTMLElement。
            constructor(){
   
                super();
                console.log("my-element");
            }
}
customElement.define('my-element',MyElement);

在我们的使用中，通常需要在自定义组件中插入自定义的内容，此时就需要借助影子节点来实现：

<my-element> </my-element>
class MyElement extends HTMLElement{
   
            constructor(){
   
                super();
                const shadom = this.attachShadow({
   
                    mode:'open',
                });
                const oDiv = document.createElement("div");
                oDiv.innerHTML = `
                <p>p的内容</p>
                <button>点击弹出p的内容</button>
                `;
                // 影子节点就相当于组件内部的根元素 
                shadom.appendChild(oDiv);
                var oP = oDiv.getElementsByTagName("p")[0];
                var oBtn = oDiv.