webcomponents

    
    
    
    



    
  外面的样式 

    
   
    
    

"use strict";
window.onload = () => {
    class wujie extends HTMLElement {
        constructor() {
            super();
            //shallow 隔离样式的容器
            let shallow = this.attachShadow({ mode: 'open' });
            let tem = document.getElementById('wujie');
            shallow.appendChild(tem.content.cloneNode(true));
            // console.log(this.getAttribute('url'));
            // console.log(this.getAttributeNames());
            // // this.className.appendChild('1111')
            // this.setAttribute('aaa', '3333');
            // // this.className
            // this.classList.add('1111')
            // console.log(this.className);
            // this.style.padding = '20px';
            // //   this.style.marginTop = '50px'
            // this.style.position = 'relative';
            // this.style.color = 'white';
            // this.style.top = '50px';
        }
    }
    window.customElements.define('wu-jie', wujie); //创建自定义标签
};