「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。

写在前面

如何封装一个组件？
在现代的前端开发中，大家提到组件，大概率会想到使用 react 或是 vue 来构建通用组件
那我们强大的原生 JavaScript 能做到这件事件呢？答案肯定是可以的
通过 web components 就能很完美的做到
web components 是一套技术，它可以根据我们的需要定制一些特殊的不同于已有的标签元素，我么可以在定制的元素中封装一些特定的功能
这是不是就是我们经常提到的组件封装，也就是 js 已经原生就支持组件的封装了
web components 由三个主要技术组成
- 自定义元素 custom element
- 影子 DOM，也就是 shadow dom
- HTML 模板，也就是 HTML templates
今天我们主要介绍自定义元素，这个技术最主要的就是使用 customElements 对象

customElements 是什么

customElements 是 window 全局对象上的一个只读属性，返回的是一个可以注册自定义元素和查询已注册的自定义元素方法的对象
- customElements.define()，该方法用于注册一个自定义元素
  - 该方法共接受三个参数，第一个是自定义元素的名字，第二个是自定义元素的构造函数，第三个是一个可选参数对象，该对象有一个属性为 extends，可以指定自定义元素继承一个已创建的元素的名字
- customElements.get()，该方法返回已注册元素的构造函数，若不存在，则会返回 undefined
接下来，我们写个小 demo 来感受一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <img is="my-img" />
  </body>

  <script>
    class MyImg extends HTMLImageElement {
      constructor() {
        super();
        // console.log(this);
        this.src = "https://p26-passport.byteacctimg.com/img/user-avatar/df4ad9f5642019c662a9bc5a213c418e~300x300.image";
      }
    }
    customElements.define("my-img", MyImg, { extends: "img" });
  </script>
</html>

上面的例子中创建了一个继承自 HTMLImageElement 类的自定义类 MyImg
在 MyImg 类中，添加了一个 src 属性，且赋值为我的头像地址
然后最关键的一步，注册我们的自定义元素，并且设置其继承我们常用的 img
最后使用的时候，给标签 img 设置一个 is 属性，其值为我们自定义的元素的名字
这样我们就可以在使用 img 标签时不用设置 src 属性，也能显示图片了

小结

为了避免阅读体验，我将用三篇文章来分别介绍，web components 的三大技术
单单通过这个例子，大家可能还不足以体会到自定义元素的强大之处
下一篇文章，我么将介绍与自定义元素技术搭配使用更佳的 HTML 模板技术

最后

今天的分享就到这里，欢迎大家在评论区留言讨论
如果觉得文章写的还不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

如何用纯原生 JS 封装一个组件（一）：自定义元素

写在前面

customElements 是什么

小结

最后