WebComponent-自定义组件
Web Component API
前端组件，使用过vue和react的前端开发人员来说都不会陌生。在我们的Chrome浏览器中，则是极力推进Web Component API浏览器原生组件的开发。
封装组件
类似于这样的组件标签<user-card></user-card>
在Vue中的使用十分常见，而我们在浏览器中也能够使用原生的API实现该功能。
- 首先得了解一个方法
window.customElement.define(string, constructor);
该方法能够自定义一个标签，传参为：‘标签名’，‘构造函数’； - 然后我们需要为自定义的标签创建一个类
class UserCard {
constructor() {}
}
- 我们需要让这个类继承标签元素类
class UserCard extends HTMLElement{
constructor() {
super()
}
}
- 为该HTMLElement创建元素内容,需要使用到
<template></template>标签
<template id="userCard">
<div>
<button>click!</button>
</div>
</template>
- 然后再对UserCard类进行元素的插入
class UserCard extends HTMLElement{
constructor() {
super()
var templateDOM = document.getElementById("userCard");
var content = templateDOM.content.cloneNode(true);
this.appendChild(content);
}
}
- 最后使用
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中添加