在 Web 技术不断发展的今天，前端开发者们提出了一个新的需求：创建可重复使用的自定义 HTML 元素。这个需求最开始由 Mozilla 提出，在 2011 年就有了原型实现。后来，Custom Elements 作为一个标准出现在了 Web Components 规范中。
Custom Elements 是 Web Components 的核心 API 之一，它允许开发者创建自定义的 HTML 标签，并为其添加行为和样式。
Custom Elements 的实现过程可以分为两个主要的步骤：定义 custom element 和注册 custom element。
定义 custom element
定义 custom element 即创建一个类（Class），该类通过继承 HTMLElement 类来扩展原生 HTML 元素。在定义 custom element 类时，需要指定该元素的标签名，和元素的样式和行为等。
具体的实现步骤如下：
- 创建一个类，继承自 HTMLElement 类。
- 在类的构造函数中，调用 super() 方法，调用 HTMLElement 的构造函数，创建一个新的 HTMLElement 实例。
- 对该实例进行初始化设置，例如为该实例添加一个影子 DOM 树，以避免该元素的样式影响到全局。
- 编写与该自定义元素相关联的样式和 JavaScript 行为。
以下是一个简单的自定义元素的例子：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- --- - ------------------------------
--------------- - ------- --------
------------------------
-
-
----------------------------------- -----------在这个例子中，我们定义了一个新的元素 tag <my-element> 。该元素继承自 HTMLElement 类，具有所有原生 HTML 元素的属性和方法。在该元素的构造函数中，添加了一个影子 DOM 树，并在其中添加了一个包含文本的 div 元素。最后，通过 customElements.define() 方法，将该元素定义为一个自定义元素。
注册 custom element
定义 custom element 后，还需要将它注册到文档中，以便在文档中使用该元素。注册 custom element 的方法是调用 customElements.define() 方法，并通过该方法的参数指定要创建的元素的标签名和元素的类名。
以下是一个注册自定义元素的例子：
customElements.define('my-element', MyElement);注意：一个自定义元素被定义后，必须在任何实例被实例化之前进行注册。
例子
下面，我们来看一个更为复杂的例子。该例子定义了一个自定义元素 MyButton，该元素具有按钮的样式和行为。该元素还可以接受一个属性“disabled”，如果该属性被设置为 true，则该按钮将不可用。
HTML 代码：
<my-button id="btn" disabled>Click me</my-button>
JavaScript 代码：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ------ - ---------------------------------
---------------------------- -------
------------------ - -----------------
-------------------------------- -- -- -
-- ---------------- -
---------------------- ------------------
-
---
---------------------------
-
--- ---------- -
------ ------------------------------
-
--- ------------- -
-- ----- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
---------------------------------- ----------在代码中，我们创建了一个自定义元素的类 MyButton，它继承自 HTMLElement 类，并通过构造函数创建了一个包含单个按钮的影子 DOM 树。该按钮具有一个“my-button”类，和在 HTML 中指定的文本内容。该元素还定义了一个监听点击事件的回调函数，该回调函数检查该按钮是否被禁用。如果该按钮没有被禁用，则触发自定义事件“myClick”。
最后，MyButton 类还定义了一个 get 和 set 属性，用于获取和设置按钮的禁用状态。如果按钮的“disabled”属性被设置为 true，则按钮将被禁用。
我们可以添加以下 JavaScript 代码来监听“myClick”事件：
const btn = document.querySelector('#btn');
btn.addEventListener('myClick', () => {
alert('Button clicked!');
});总结
Custom Elements 是 Web Components 规范中的核心 API 之一，允许开发人员创建自定义的 HTML 元素。Custom Elements 实现的过程可以分为两个步骤：定义自定义元素，注册自定义元素。通过这篇文章，您已经了解了 Custom Elements 的实现过程和使用技巧，并学习了如何创建自己的自定义元素。希望这篇文章对您的 Web 开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494624148841e98941da424