Web Components --- Custom Element(自定义标签)前端在开发页面的时候，对于一些重复的代码

前端在开发页面的时候，对于一些重复的代码或功能，我们希望可以提取出来，封装成组件，在需要的地方引入即可。现有的前端框架，如Vue,React为我们提供了接口，可以基于这些框架实现组件化开发，如果我们的项目是原生开发，该如何实现组件化开发，答案是Web Components。

Web Components包含自定义元素（Custom Element），影子Dom(Shadow Dom)，Html模板三部分

Custom Element

我们实现自定义标签有两种方式，一种是直接使用我们定义的标签，另一种是借助于内置元标签

第一种方式

1、创建一个扩展于HTMLElement的类

class myElement extends HTMLElement {
        constructor() {
          super();
        }

        connectedCallback(){} //每当元素添加到文档中时调用
        disconnectedCallback(){}//每当元素从文档中移除时调用
        adoptedCallback(){} //每当元素被移动到新文档中时调用
        attributeChangedCallback(){} //在属性更改、添加、移除或替换时调用
 }

2、customElements.define(name,constructor,option)方法定义标签

/**
  * @params customElements.define(name,constructor,options)
  * name:标签名，必须小写字母开头，包含一个连字符，并符合规范中有效名称的定义中列出的一些其他规则
  * constructor:自定义元素的构造函数
  * options:这是一个包含单个属性 extends 的对象,该属性是一个字符串，命名了要扩展的内置元素
  */
      customElements.define('my-element',myElement)

3、在页面中使用

 <my-element></my-element>

第二种方式

自定义标签也可以使用内置标签实现，需要注意的是，扩展的类则为你想使用的标签类，不再是HTMLElement。以div标签为例

1、扩展HTMLDivElement的类

class myElement extends HTMLDivElement {
        constructor() {
          super();
        }

        connectedCallback() {
          const div = document.createElement("div");
          div.innerHTML = "<p>自定义标签</p>";
          this.append(div);
        }
 }

2、定义标签使用extends扩展标签

customElements.define("my-element", myElement, { extends: "div" });

3、使用标签

将自定义标签作为is的属性值

 <div is="my-element"></div>

我们在创建标签时，如果希望其具备一些其他标签的功能时，可以选择第二种方式创建标签，例如，希望它是块级标签时，可以使用HTMLDivElement或者HTMLParagraphElement；希望它是行内标签时，可以使用HTMLSpanElemment

ELement是所有document元素的基类，HTMLElement是所有HTML标签的基类，Element是HTMLElement的父类，我们平时用的一些内置标签，基本都是基于HTMLElement类实现的；同时基于Element作为父类的还有其他类，如SVG元素，MathML 元素等。

Web Components --- Custom Element(自定义标签)