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

回到相关文章 »

效果:

代码:

HTML代码:
<link rel="import" href="module.html">
<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>