标签：Web 自定义 UserCard content API constructor 组件

• 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中添加

标签：Web,自定义,UserCard,content,API,constructor,组件
来源： https://www.cnblogs.com/Samo-Li/p/15868152.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。