背景

HTML的标签大家不陌生，都是标准定义好的，我们只管用。但是有没有想过，我们可以定义自己的标签，封装成自己的组件。

DEMO

下面的demo，用于展示浏览器版本的支持情况。查看其DOM，发现标签是browser-support，这就是自定义标签。

实现

HTMLElement

Custom Elements - browser-support

browser-support {

display: block;

}

class browserSupport extends HTMLElement {

static get observedAttributes () {

return ['chrome-version', 'opera-version', 'firefox-version', 'safari-version', 'ie-version']

}

constructor () {

super();

this.render();

}

render () {

var shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open'});

var ul = document.createElement('ul');

ul.style.listStyle = 'none';

ul.style.display = 'flex';

ul.style.width = '100%';

const browserList = [

{

text: 'Chrome',

img: '../../assets/img/chrome_189x189.png',

version: this.chromeVersion

},

{

text: 'Opera',

img: '../../assets/img/opera.png',

version: this.operaVersion

},

{

text: 'Firefox',

img: '../../assets/img/ff_189x189.png',

version: this.firefoxVersion

},

{

text: 'Safari',

img: '../../assets/img/safari_189x189.png',

version: this.safariVersion

},

{

text: 'IE',

img: '../../assets/img/IE8_189x189.png',

version: this.ieVersion

}

]

var liWidth = (100 / browserList.length) + '%';

for (let i = 0; i < browserList.length; i++) {

var li = document.createElement('li');

li.style.textAlign = 'center';

li.style.width = liWidth

let logoImg = document.createElement('img');

logoImg.src = browserList[i].img;

logoImg.style.width = '60px';

logoImg.style.height = '60px';

li.appendChild(logoImg);

let p1 = document.createElement('p');

p1.style.color = '#3a3a3a';

p1.style.fontSize = 14;

p1.innerText = browserList[i].text;

li.appendChild(p1);

let p2 = document.createElement('p');

p2.style.color = '#4a4a4a';

p2.style.fontSize = 12;

p2.innerText = browserList[i].version;

li.appendChild(p2);

ul.appendChild(li)

}

shadowRoot.innerHTML = ""

shadowRoot.appendChild(ul);

}

attributeChangedCallback (attr, oldValue, newValue) {

this.render()

console.log('attributeChangedCallback trigger')

}

disconnectedCallback () {

console.log('disconnectedCallback')

}

get chromeVersion () {

return this.getAttribute('chrome-version') || ''

}

get operaVersion () {

return this.getAttribute('opera-version') || ''

}

get firefoxVersion () {

return this.getAttribute('firefox-version') || ''

}

get safariVersion () {

return this.getAttribute('safari-version') || ''

}

get ieVersion () {

return this.getAttribute('ie-version') || ''

}

}

customElements.define('browser-support', browserSupport);