什么是 Web Components ？
    Web Components 是一个浏览器原生支持的组件化方案，允许你创建新的自定义、可封装、可重用的HTML 标记。不用加载任何外部模块，直接就可以在浏览器中跑。
    Web Components 存在的目的就是希望提供给开发者，能够自定义可重用的、可被浏览器正常解析的标签，让逻辑、样式、标签都封装在一个组件内部，最终用自定义的标签渲染视图。

    Vue 的模版系统本身是参考 Web Components 的规范进行了上层的设计，因为 Web Components 拥有：自定义标签、自定义属性、自定义组件的特点。

    例如我们想要创建一个自定义的组件：

    1. <my-info
    2.   avatar="https://cdn.pixabay.com/photo/2023/02/13/05/58/doodle-7786568__340.png"
    3.   name="xiechen"
    4.   age="22"
    5.   occupation="student">
    6.   The infomation of xiechen.
    7. </my-info>
    1. // 需要继承 HTMLElement 类
    2. window.customElements.define("my-info", class extends HTMLElement {
    3.     constructor() {
    4.       super();
    6.       // 这里的 this 指向的就是我们的 my-info 标签本身
    7.       this.title = this.textContent;
    8.       this.avatar = this.getAttribute("avatar");
    9.       this.myName = this.getAttribute("name");
    10.       this.age = this.getAttribute("age");
    11.       this.occupation = this.getAttribute("occupation");
    13.       this.init();
    14.     }
    16.     init() {
    17.       var shdowDOM = this.attachShadow({
    18.         mode: "open"
    19.       });
    20.       shdowDOM.appendChild(this.createDOM());
    21.     }
    23.     createDOM() {
    24.       // 创建需要的 DOM
    25.       var oContainer = this.createContainer();
    26.       oContainer.appendChild(this.createTitle());
    27.       oContainer.appendChild(this.createAvatar());
    28.       oContainer.appendChild(this.createName());
    29.       oContainer.appendChild(this.createAge());
    30.       oContainer.appendChild(this.createOccupation());
    31.       return oContainer;
    32.     }
    34.     createContainer() {
    35.       var oContainer = document.createElement("div");
    36.       oContainer.className = "my-info-container";
    37.       return oContainer;
    38.     }
    40.     createTitle() {
    41.       var oTitle = document.createElement("h1");
    42.       oTitle.className = "my-info-title";
    43.       oTitle.textContent = this.title;
    44.       return oTitle;
    45.     }
    47.     createAvatar() {
    48.       var oImage = document.createElement("img");
    49.       oImage.className = "my-info-avatar";
    50.       oImage.style.width = "200px";
    51.       oImage.src = this.avatar;
    52.       return oImage;
    53.     }
    55.     createName() {
    56.       var oName = document.createElement("p");
    57.       oName.className = "my-info-name";
    58.       oName.textContent = this.myName;
    59.       return oName;
    60.     }
    62.     createAge() {
    63.       var oAge = document.createElement("p");
    64.       oAge.className = "my-info-age";
    65.       oAge.textContent = this.age;
    66.       return oAge;
    67.     }
    69.     createOccupation() {
    70.       var oOccupation = document.createElement("p");
    71.       oOccupation.className = "my-info-occupation";
    72.       oOccupation.textContent = this.occupation;
    73.       return oOccupation;
    74.     }
    75.   }
    76. );

    image.png