在前端开发中，组件是一个关键词。我们使用组件来构建网页、应用和交互式体验。传统的组件开发方式可能涉及 jQuery 插件或类似框架，但现在我们有更多的选项，其中之一就是使用 Web Components。
Web Components 是一种浏览器 API，可以帮助我们定义可重用、可扩展和可组合的自定义组件。在 Web Components 中，Custom Elements 是定义自定义元素的主要机制。Custom Elements 可以被认为是原生 HTML 元素的扩展，不仅是外观和样式，而且还可以有行为和状态。
在本文中，我们将深入了解 Custom Elements 的基础知识，并了解如何使用 JavaScript Classes 来创建自定义组件。
创建 Custom Elements
在定义 Custom Elements 之前，我们需要了解一些 Web Components 的既定格式。Custom Element 的定义包括以下两个步骤：
- 创建一个继承自 HTMLElement 的 JavaScript Class；
- 使用 window.customElements.define() 注册自定义元素。
让我们来看一个简单的例子：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ---- - -------------------------------
---------------- - ------- --------
-------------------------
-
-
------------------------------------------ -----------------在这个例子中，我们首先创建一个名为 MyCustomElement 的类，并将其扩展为 HTMLElement。在类的构造函数中，我们创建了一个 Shadow DOM，并在其中添加了一个 span 元素。最后，我们调用 window.customElements.define()，将 MyCustomElement 注册为自定义元素 'my-custom-element'。
在我们创建自定义元素后，它将可以像任何其他 HTML 元素一样使用：
<my-custom-element></my-custom-element>
在页面上使用自定义元素后，浏览器将执行构造函数中的代码，并在 Shadow DOM 中呈现添加的元素。
使用 JavaScript Classes 创建复杂的组件
自定义元素可以包含比上面例子中更复杂的行为和状态，这有助于我们创建更强大和更实用的组件。在下面的例子中，我们将创建一个复杂的自定义元素，该元素具有可自定义的属性、可重用的样式和事件处理程序。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
--------- - ------- --------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------ ------
------- ------
-------- ----
------- --- ----- -----
-
-- -
------- --
-
------ -
----------- ----
-------- --- ----
------- -----
----------------- --------
------ -----
------- --------
-
--------
---------------------
------------- -----------
--
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
----------- - -------------------------------
------------------------------------- -- -- -
---------------------- -----------------------------------
---
-
------------------------------ --------- --------- -
-- ----- --- ------- -
--------- - ---------
----- -- - ------------------------------------
-------------- - ----------
-
-
-
----------------------------------- -----------在这个例子中，我们首先定义了一个 MyElement 类，并在静态 observedAttributes 属性中声明了我们感兴趣的属性，以便在属性更改时进行操作。我们还定义了一个 text 属性，用于存储自定义的文本。
在构造函数中，我们创建了一个 template 元素，其中包含了我们的样式和 HTML。我们还添加了用于处理 my-element-clicked 自定义事件的代码。
最后，我们使用 Shadow DOM 将我们的样式和 HTML 添加到页面中，并使用 attributeChangedCallback() 方法来监视 text 属性的更改。
在页面上，我们可以像下面这样使用 MyElement 自定义元素：
<my-element text="Welcome"></my-element>
总结
Custom Elements 是一种很有用的机制，它可以帮助我们创建可重用、可组合和可扩展的自定义组件。使用 JavaScript Classes 创建自定义元素可以让我们编写模块化、可读性高的代码，并在开发复杂的组件时实现更高的可维护性。如果你想进一步了解 Custom Elements，请查看 Web Components 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648682bd48841e98945113ea