代码示例

<!-- 定义组件模板 -->
<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>

遗留问题

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

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