背景
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);
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/198544.html原文链接：https://javaforall.net
![如何使用eclipse软件创建一个Java项目？[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
