Web Component入门

本文作者为奇舞团前端开发工程师

引言

前端开发者，现在在进行项目的开发时，一般很少使用原生的js代码，往往都会依靠Vue，React等框架进行开发，而不同的框架都有自己不同的开发规则，但是目前所使用的主流框架，都是遵循组件化开发的模式，即把不同功能的代码，拆分成不同的组件，以此来达到高内聚，低耦合，减少代码量等目的。目前主流的框架，均为是有公司或者公司开源。自己制定了一套完整的开发规范。谷歌在2011年的时候就已经提出了组件化开发的概念，即Web Component ，这个方案现在是被纳入了w3c规范之中。

如何构建

构建一个Web Component，我们需要按照以下三个步骤

1.定义模板

<template>
      <div>web component</div>
      <button>按钮</button>
</template>

我们在<template>标签内部，编辑我们组件的结构样式，这里可以类比vue的模板写法。

2.组件逻辑编写

class MyWebComponent extends HTMLElement {
  constructor() {
    super();
    // 深度克隆一份template
    const content = template.content.cloneNode(