Web Components入门实例教程

代码示例

  
    .user-name {
      color: green;
    }
  
  



  // 定义组件
  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);

遗留问题

• 按照文章写的demo，this.getAttribute("name")无法获取数据，导致传参失败

参考 Web Components 入门实例教程-阮一峰