Web Component API-自定义组件

目录

• WebComponent-自定义组件
  • Web Component API
  • 封装组件

WebComponent-自定义组件

Web Component API

前端组件，使用过vue和react的前端开发人员来说都不会陌生。在我们的Chrome浏览器中，则是极力推进Web Component API浏览器原生组件的开发。

封装组件

类似于这样的组件标签
<user-card></user-card>
在Vue中的使用十分常见，而我们在浏览器中也能够使用原生的API实现该功能。

1. 首先得了解一个方法
   window.customElement.define(string, constructor);
   该方法能够自定义一个标签，传参为：‘标签名’，‘构造函数’；
2. 然后我们需要为自定义的标签创建一个类

  class UserCard  {
    constructor() {}
}

3. 我们需要让这个类继承标签元素类

  class UserCard extends HTMLElement{
    constructor() {
      super()
  }
}

4. 为该HTMLElement创建元素内容,需要使用到<template></template>标签

<template id="userCard">
    <div>
      <button>click!</button>
    </div>
</template>

5. 然后再对UserCard类进行元素的插入

 class UserCard extends HTMLElement{
    constructor() {
      super()
        var templateDOM = document.getElementById("userCard");
        var content = templateDOM.content.cloneNode(true);
        this.appendChild(content);
  }
}

6. 最后使用customElement.define进行挂载

 class UserCard extends HTMLElement{
    constructor() {
      super()
        var templateDOM = document.getElementById("userCard");
        var content = templateDOM.content.cloneNode(true);
        this.appendChild(content);
  }
}
window.cunstomeElement.define('user-card',UserCard);

*7. 如果需要添加样式，则在template中添加