Web Components 技术是一种用于创建可重用的、封装的、可组合的 UI 组件的新方法。其中 Custom Elements 是其中的一个重要组成部分，它允许您创建独特的 HTML 元素并在文档中使用它们。
本文将向您介绍 Custom Elements，并探讨其潜力和如何使用它们编写可重用的、可测试和可移植的 Web 组件。
什么是 Custom Elements？
Custom Elements 是一种 Web API，它允许您自定义 HTML 元素，并为其定义自定义行为和属性。这意味着您可以创建具有自定义语义的 HTML 标记，可以与开发人员和框架共享。
Custom Elements 实际上是一组 API，包括：
customElements.define()：定义一个新的自定义元素。customElements.get()：检索特定名称的自定义元素类。customElements.whenDefined()：返回一个 Promise，以便在一个自定义元素类被定义时进行通知。
Custom Elements 可以继承现有元素或其他自定义元素，从而使其变得更加通用。您可以为实例化的元素添加事件、方法和属性，以便在应用程序中重复使用。
为什么要使用 Custom Elements？
使用 Custom Elements 是为了创建真正通用、可重用和可组合的 Web 组件。这些组件可以以独立的方式编写、测试和维护，这使得它们成为用于不同项目的理想工具。
Custom Elements 有以下优点：
- 可重用：Components 可以在应用程序中快速复制和粘贴，而不必重新编写其所有代码，这样可以提高生产率。
- 可插拔：由于组件遵循 Web 组件规范，因此它们可以与不同的框架和库一起使用。
- 可维护：Components 具有良好的封装性，这使得它们可以隔离错误和修改。
- 可扩展：由于可自定义性，因此可以将 Component 作为基础构建块，并以此构建更复杂的元素。
编写您自己的 Custom Elements
Custom Elements 是使您的组件可重用和可移植的 Web 技术。现在，您可以创建具有自己功能和样式的 HTML 标记，然后在任何项目中使用。
由于 Custom Elements 可以继承现有元素，因此您可以创建一个基于 <button> 或 <input> 的新元素，然后为其添加所需的自定义属性和行为。
下面是一个示例，您可以创建一个名为 my-button 的元素，它是 <button> 元素的子类，可以在其中添加自定义属性和行为：
-- -------------------- ---- -------
--------- ------------------------
---------- ---------------
-----------
--------
----- -------- ------- ----------------- -
------------- -
--------
------------------- ----- ------ ---
----- ------- - --------------------
------------------------------------------------------
----
--
-------------------------------------
-
-
---------------------------------- --------- - -------- -------- ---
---------这个例子创建了一个 MyButton 类，继承自 <button>，并重写了构造函数来创建一个 shadow DOM 和添加 HTML 的标记片段。最后，使用 customElements.define() 来定义新元素。
在使用时，您可以像使用一个普通的 <button> 元素一样使用 my-button：
<my-button>Click Me!</my-button>
这里还有更多的代码，假设您要增加一个 color 属性来改变 MyButton 的颜色：
-- -------------------- ---- -------
--------- ------------------------
---------- ---------------
-----------
--------
----- -------- ------- ----------------- -
------------- -
--------
------------------- ----- ------ ---
----- ------- - --------------------
------------------------------------------------------
----
--
-------------------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------- - ---------
-
-
-
---------------------------------- --------- - -------- -------- ---
---------
---------- ----------------- ---------------此时，通过 observedAttributes 数组定义需要监视的属性，然后将这些属性绑定在 attributeChangedCallback 中的自定义行为中。
结论
Custom Elements 是一种非常有用的编写 Web 组件的新方法。通过使用 Custom Elements，您可以创建模块化、可重用的组件，以提高生产力并降低代码维护成本。
通过实践和不断学习，您可以将 Components 成为您 Web 应用程序开发的有力工具。开始设计一个自己的 Component，并在源代码中注释您发现的任何有趣的技巧，以便以后可以快速访问和使用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f365cce1e8e99bfaf6a76c