在过去的几年间，Web 组件已经成为前端界最热门的话题之一。Web 组件不仅能增加网站的复杂度，提升用户体验，还能加速开发过程并减小维护成本。而 Custom Elements 是一个全新的且令人兴奋的技术，它可以让我们构建出独特的、可复用的和自定义的 Web 组件。
Custom Elements 简介
Custom Elements 是一个 Web Components API 的标准，它允许开发人员定义其自己的 HTML 标记，并且定义其行为及样式。通过使用 Custom Elements，我们可以创建出一种新型的 HTML 元素，称为自定义元素，而这些元素可以类似于原生 HTML 元素一样被使用和调用。
实质上，Custom Elements 的主要作用是改变 HTML 的语义，它能够封装一段特定的代码，并将其抽象成一个可重用、可配置的组件。同时，Custom Elements 还允许开发者将这些组件与 HTML DOM 和其他组件库集成起来。
Custom Elements 提供了四种生命周期方法，分别为 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback，分别负责在自定义元素创建和从 DOM 中删除、元素移动和属性值变化时执行一些特定的行为和操作。
创建 Custom Elements
我们可以使用 JavaScript 和 HTML 来创建 Custom Elements。下面是一个简单的示例，其中我们将创建一个 custom-card 元素来显示一张卡片。
HTML 部分
首先，在 HTML 文件中，我们定义了一个 custom-card 元素，并在元素内部定义了一段模板代码，该模板会用到 Web 组件 Shadow DOM 技术。
--------- -----
------
------
----- ----------------
------------- ----------------
-------
------
------- ------------------------------
---------------------------
-------
-------JavaScript 部分
接着，在 JavaScript 文件中，我们定义了 custom-card 元素的构造函数，并且扩展了 HTMLElement 原型，并在 ConnectedCallback 方法中将模板内容插入到 Shadow DOM。
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
----- -------- - ------------------------------------------------
----- ------- - ---------------------------------
------------------------ ------------------------------
-
-
------------------------------------ ------------在上面的代码中，我们使用了 customElements.define 方法来注册自定义元素，并将其名称设置为 "custom-card"。然后，我们使用 attachShadow 方法来创建一个 Shadow DOM，并将设为“开放”模式。最后，我们将 template 元素的内容插入到 Shadow DOM 中。
结论
通过上文的示例可以看出，Custom Elements 非常容易并且直观地构建。当然，在实际开发中，完整的 Custom Elements 还可能涉及到许多其他的功能，例如属性、事件、Slot 等，以满足不同的需求。但是，使用 Custom Elements 构建自定义组件的基本原则始终是一致的，这有助于使我们创建出更独特、更灵活的 Web 组件。
在实际开发中，成为一名 Custom Elements 的专家需要一段时间。但是学习 Custom Elements 的过程将会给您带来新的知识和技能，提升您作为前端开发人员的能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672054f52e7021665e01c0b5