在 Web 开发日新月异的今天，Web Component 技术被越来越多的前端开发者所关注和使用。Custom Elements 是 Web Component 中的一项重要技术，可以帮助我们创建自定义 HTML 元素，本文将详细介绍 Custom Elements 的初学指南及实现方式。
Custom Elements 简介
Custom Elements 通过 JavaScript 和 HTML 的自定义元素创建方式给予 Web 开发者创建自定义 HTML 元素的能力，让开发者可以自由扩展 HTML 标签的功能，而不受现有标准或浏览器所限制。通过 Custom Elements，我们可以创建一个包含各种自定义行为和样式的 HTML 元素，并像其它 HTML 元素一样使用它们和与之互动。
创建 Custom Elements 的方式
创建方式一：继承 HTMLElement 基类法
Custom Elements 的创建方式之一是通过继承 HTMLElement 基类并通过自定义方法和属性扩展它的能力。首先，我们需要使用 ES6 class 语法声明一个类并继承 HTMLElement 基类，再通过 constructor 方法添加我们想要的自定义行为和属性即可，如下所示：
class MyElement extends HTMLElement {
constructor() {
super();
// 添加自定义行为和属性
}
}接下来，我们需要使用 customElements 的 define() 方法来定义我们的自定义元素。该方法接受两个参数，第一个参数为自定义元素的名称，必须是带有短横线的字符串；第二个参数是一个对象，包含我们自定义元素的行为和属性等相关信息，如下所示：
customElements.define('my-element', MyElement);接下来，我们就可以像使用其它 HTML 元素一样使用我们的自定义元素了：
<my-element></my-element>
创建方式二：实现 Custom Element Registry API 法
Custom Elements 的创建方式之二是通过实现 Custom Element Registry API 来定义我们的自定义元素。 Custom Element Registry 是 Custom Elements 的全局对象，它定义了一组方法，可以用于注册、解注册和查询自定义元素，如下所示：
customElements.define('my-element', MyElement);其中，第一个参数为自定义元素的名称，第二个参数为自定义元素的类、命名空间或函数。
实例教程
下面，我们将使用第一种方式来实现一个简单的 Custom Elements。
自定义元素创建步骤
首先，我们需要创建一个 class 类并继承 HTMLElement 基类。
在 constructor 中添加我们想要的自定义行为和属性。
调用 customElements 的 define() 方法，定义我们的自定义元素。
最后，在 HTML 页面中使用我们的自定义元素。
示例代码
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ----------
-------
------
---------- ------- -------
-------------------------
------- ------------------------
-------
-------JavaScript
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ------ - ------------------------ ---------
-- ---- ---- --
----- ---- - -------------------------------
-- ----
----- ----- - --------------------------------
----------------- - -
---- -
------ ----
-
--
-- ----------
---------------- - ------- ------- ----
-- ------ ------ --- -
--------------------------
-------------------------
-
-
-- -------
----------------------------------- -----------结果展示
运行上述代码，我们就可以在浏览器中看到一个红色的 span 文字了，如下图所示：
总结
Custom Elements 是 Web Component 技术中重要的一部分，可以帮助我们扩展 HTML 标签的功能，提高 Web 开发的灵活性。相信通过本文的介绍，你已经可以轻松地创建自己的第一个 Custom Elements 了。让我们一起努力探索更多 Web Component 技术的应用吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64647abe968c7c53b0557ea2