HTML5自定义元素与HTML import模块引入实例页面

效果：

//zxx: rel="import"被舍弃了，这里改成非import显示了

代码：

HTML代码：

<link rel="import" href="module.html">
<zxx-info></zxx-info>

module.html的代码：

<template id="tpl">
  <style>
  .scope {
    contain: content;
  }
  .scope > img {
    float: left;
    margin-right: 10px;
  }
  .scope > p {
    margin: 0;
    overflow: hidden;  
  }
  </style>
  <div class="scope">
    <img src="zxx.jpg">
    <p>帅哥一枚！</p>
  </div>
</template>
<script>
  // 定义<zxx-info>
  class HTMLZxxInfoElement extends HTMLElement {
    constructor() {
      super();
      // 内部显示信息    
      this.innerHTML = document.currentScript.ownerDocument.querySelector('#tpl').innerHTML;
    }
  };
  // 注册
  customElements.define('zxx-info', HTMLZxxInfoElement);
</script>