web-component

web-component是一种html原生的自定义组件解决方案，他不基于任何库或者框架。

在web-component被多数主流浏览器支持之前，我们进行组件化开发通常需要依赖例如react、vue等js框架，而传统的html+js或者jquery则无法做到组件化的多处复用，这让原生js开发相当不便利，代码的可读性也比较差。

web-component是一套技术，由以下三项技术组成：

1. custom elemenet 自定义元素
2. shadow dom 影子dom
3. html template html模板

自定义元素

CustomElementRegistry.define() 原生js函数可以用于创建自定义元素，他增强了web-component的代码复用性。

CustomElementRegistry.define()说明

CustomElementRegistry.define(name, constructor, options)可以接收三个参数,其中options为可选参数

• name 元素名称字符串
• constructor 元素构造器，自定义的元素类，可继承元素基类HTMLElement，也可以继承内置元素，比如HTMLDivElement,HTMLParagraphElement等
• options 可选参数，目前只有一个extends，表示继承的元素，比如"div"

元素类示例：

class MyDiv extends HTMLDivElement {
  constructor() {
    // Always call super first in constructor
    super();
        ...
    }
}

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

shadow dom 影子dom

对于影子dom我已在《shadow dom》中详细说明，感兴趣的可以前往查看。

html template html模板

模板技术主要包括template模板和slot插槽技术