什么是 Custom Elements？
Custom Elements 是 Web Components 标准的一部分，它允许我们创建自定义的 HTML 元素，并在页面上使用它们。这些自定义元素可以拥有自己的属性、方法和事件，它们的行为可以像普通 HTML 元素一样被 JavaScript 控制。
Custom Elements 通过两个 API 来实现：
customElements.define()：用于定义一个自定义元素。HTMLElement类：用于扩展自定义元素的功能。
如何使用 Custom Elements？
使用 Custom Elements，我们需要遵循以下步骤：
- 使用
customElements.define()方法定义一个自定义元素，并指定它的标签名和元素类。 - 创建一个继承自
HTMLElement类的元素类，该类可以拥有自己的属性、方法和事件。 - 在页面上使用该自定义元素。
下面是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们定义了一个名为 MyElement 的自定义元素，并将其标签名设置为 my-element。我们创建了一个继承自 HTMLElement 类的 MyElement 类，并在其中添加了一个构造函数，该构造函数将元素的文本内容设置为“Hello, World!”。最后，我们使用 customElements.define() 方法将 MyElement 类与 my-element 标签关联起来，并在页面上使用了该自定义元素。
Custom Elements 的实例展示
下面是一个更为复杂的例子，它展示了如何创建一个具有自定义属性、方法和事件的自定义元素。该元素是一个计数器，每次单击它时，它会将计数器的值加一，并触发一个自定义事件。
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
-------
------
----------- -----------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------- - -------------------------------------
------------------------------ -------------------------
-
--------- -
-------------
---------------------- ---------------------------- - ------- ---------- ----
--------------
-
-------- -
-------------- - -
----------- -------------------
------------- -----------
--
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们定义了一个名为 MyCounter 的自定义元素，并将其标签名设置为 my-counter。我们创建了一个继承自 HTMLElement 类的 MyCounter 类，并在其中添加了一个构造函数、一个 onClick() 方法和一个 render() 方法。
构造函数中，我们读取了 count 属性的值，并将其转换为整数。我们还为元素添加了一个单击事件监听器，该监听器调用 onClick() 方法。
onClick() 方法将计数器的值加一，并触发一个自定义事件 count-changed，该事件的 detail 属性包含了计数器的当前值。最后，它调用 render() 方法来更新元素的显示。
render() 方法使用模板字符串来生成元素的 HTML 内容，并将其赋值给 innerHTML 属性。
最后，我们使用 customElements.define() 方法将 MyCounter 类与 my-counter 标签关联起来，并在页面上使用了该自定义元素。
总结
Custom Elements 是一种非常有用的技术，它可以帮助我们创建自定义的 HTML 元素，并在页面上使用它们。使用 Custom Elements，我们可以将页面上的功能模块化，并使它们更易于维护和重用。
在实际开发中，我们可以使用 Custom Elements 来创建各种自定义元素，例如表单控件、图表、导航菜单等等。同时，我们也可以使用已经存在的自定义元素，例如 Google 的 Polymer 元素库，来加速我们的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e75a5b1886fbafa425d53c