在前端开发中，我们经常需要使用各种组件来实现页面的功能，比如按钮、表单、轮播图等等。虽然 HTML 提供了一些基本的组件，但是很多时候这些组件的功能无法满足我们的需求。那么如何开发超越 HTML 默认功能的组件呢？这就需要使用 Custom Elements 了。
什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许我们创建自定义的 HTML 元素。通过定义一个新的 HTML 标签，我们可以实现自己的组件，包括样式、行为和功能。
Custom Elements API 包括两个主要的接口：CustomElementRegistry 和 HTMLElement。CustomElementRegistry 用于注册和管理自定义元素，而 HTMLElement 则是自定义元素的基类，我们可以通过继承它来创建自定义元素。
如何创建 Custom Elements
下面是一个简单的例子，演示如何使用 Custom Elements 创建一个自定义元素：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们创建了一个名为 MyElement 的自定义元素，并将其注册到 customElements 中。在构造函数中，我们设置了元素的 innerHTML 属性为 'Hello, World!'，这样当页面加载时，就会显示这个文本。
如何扩展 Custom Elements
除了基本的 HTML 元素属性和方法，我们还可以为自定义元素添加自定义属性和方法。下面是一个例子，演示如何扩展自定义元素：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
------------------------------ -----------------------------
-
------------- -
---------- ------- --- -----------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们为自定义元素添加了一个 handleClick 方法，当用户点击元素时，会弹出一个提示框。我们还定义了一个 name 属性，并在 observedAttributes 中进行了声明，这样当 name 属性发生变化时，会触发 attributeChangedCallback 方法。
如何使用 Custom Elements
使用自定义元素跟使用普通的 HTML 元素没有什么区别，只需要在 HTML 中使用自定义标签即可。下面是一个例子，演示如何使用自定义元素：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
----------- -------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- ---------------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-------------- - ------- --------------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们使用了一个名为 MyElement 的自定义元素，并设置了 name 属性为 'John'。在构造函数中，我们使用 this.name 属性来获取 name 属性的值，并将其插入到元素的 innerHTML 中。当 name 属性发生变化时，会触发 attributeChangedCallback 方法，我们在该方法中更新了元素的 innerHTML。
总结
Custom Elements 是一种非常强大的技术，通过它我们可以创建超越 HTML 默认功能的组件。在开发过程中，我们可以使用自定义属性和方法来扩展自定义元素的功能，同时也可以使用自定义事件来实现与其他元素的交互。如果您想进一步了解 Custom Elements 的使用方法和最佳实践，可以参考 Web Components 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66278d3ac9431a720c4376fa