HTML自定义标签

背景

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

DEMO

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

实现

HTMLElement

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../assets/css/common.css">
    <title>Custom Elements - browser-support</title>
    <style>
      browser-support {
        display: block;
      }
    </style>
  </head>
    <browser-support id="browserSupport" chrome-version="64+" opera-version="8.3+" firefox-version="58+" safari-version="6.1+" ie-version="11+" style="width: 600px;"></browser-support>
  <body>
  </body>
  <script>
  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);
  </script>
</html>

HTML自定义标签

背景

DEMO

实现

HTMLElement

davidshi

引用和评论

iPhone苹果手机如何导出QQ浏览器m3u8视频+合并

前端开发工具

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

html如何实现跳转到锚点

这些年

一个用JavaScript生成思维导图(mindmap)的github repo