Js原生封装选项卡组件

class MyTab extends HTMLElement{  //创建一个类名MyTab
    constructor(){ //构造函数
        super();  //指向父类构造函数，必须要有的
 
        const shadow = this.attachShadow({ //影子dom
            mode : 'open' //开放的封装模式
        })
 
        let n = 0;
        let titles = ['标题1','标题2','标题3'];
        let inners = ['内容1','内容2','内容3'];
 
        for(let i=0;i<3;i++){
            let button = document.createElement('button');
            button.innerHTML = titles[i];
 
            if(i == n){
                button.classList.add('active');
            }
 
            button.onclick = function () {
                let aButton = shadow.querySelectorAll('button');
                let aP = shadow.querySelectorAll('p');
 
                for(let i=0;i<3;i++){
                    aButton[i].classList.remove('active');
                    aP[i].classList.remove('active');
                }
                this.classList.add('active');
                aP[i].classList.add('active');
            }
 
            shadow.appendChild(button);
        }
 
        for(let i=0;i<3;i++){
            let p = document.createElement('p');
            p.innerHTML = inners[i];
 
            if(i == n){
                p.classList.add('active');
            }
 
            shadow.appendChild(p);
        }
 
        const style = document.createElement('style');
 
        style.textContent = `
                button.active{
                    background : yellow;
                }
                p{
                    display:none;
                }
                p.active{
                    display:block;
                }
            `;
 
        shadow.appendChild(style);
 
        let div = document.createElement('div'); //插槽
        div.innerHTML = '<slot></slot>';
 
        shadow.appendChild(div);
 
    }
}
 
customElements.define('my-tab',MyTab); //注册组件

然后在html文件里面写入<my-tab></my-tab>就可以使用组件了