Web Components入门实例教程

<!-- 定义组件模板 -->
<template id="UserNameTemplate">
  <style>
    .user-name {
      color: green;
    }
  </style>
  <div class="user-name"></div>
</template>
<script>
  // 定义组件
  class UserName extends HTMLElement {
    constructor() {
      super();
      let shadow = this.attachShadow({ mode: "closed" });
      let content = document
        .querySelector("#UserNameTemplate")
        .content.cloneNode(true);
      console.log(this.getAttribute("name"));
      content.querySelector(".user-name").innerText =
        this.getAttribute("name");
      shadow.appendChild(content);
    }
  }
  // 注册组件
  window.customElements.define("user-name", UserName);
</script>
<!-- 使用组件 -->
<user-name name="Tom"></user-name>