Web Components 是一项用于创建可重用的自定义用户界面组件的 Web 平台 API。其中 Custom Elements 是其中一项关键技术，允许开发者创建自定义的 HTML 标签。
Custom Elements 的定义
Custom Elements 允许开发者在 HTML 中定义自己的元素。例如，我们可以定义一个名为 "my-element" 的元素，并在页面中使用它，就像使用其他 HTML 元素一样：
<my-element></my-element>
Custom Elements 是使用原生 JavaScript 构建的，而不是使用像 React 或 Vue 这样的框架。开发人员可以使用 JavaScript 类来创建 Custom Elements，并在需要时将它们注册为自定义元素。
Custom Elements 还允许开发人员定义属性、方法和事件，以便与元素进行交互。属性和方法与其他 JavaScript 对象一样进行访问，而事件可以通过在元素上添加事件监听器来处理。
实现 Custom Elements
要实现一个 Custom Element，我们需要使用原生 JavaScript 的 class 关键字来创建一个自定义类。这个类应该继承自 HTMLElement，因为它是 Web Components 的基础类之一。接下来，我们定义一个构造函数，该构造函数将会在元素实例被创建时调用。
class MyElement extends HTMLElement {
constructor() {
super();
// 在此处添加元素的初始化代码
}
}在构造函数中，我们可以添加任何必要的初始化代码，例如定义元素的结构和样式，将事件监听器添加到其上，或通过调用浏览器 API 来连接到其他服务。
当元素被实例化时，构造函数将会被调用。在这里，我们可以设置元素的一些属性并添加任何必要的事件监听器：
-- -------------------- ---- ------- ------------- - -------- ------------------------- ---------- ------------- - -- ------------------------------ --------------- -------------------------------- ----------------- - ---------- - -- ----------- - ----------------- - -- --------- -
接下来，我们需要使用 customElements.define() 函数将自定义元素注册到 Web 页面中。这个函数接受两个参数：元素的名称和元素的类。下面的代码演示了如何将 "my-element" 元素注册到 Web 页面中：
customElements.define('my-element', MyElement);示例代码
下面是一个完整的 Custom Elements 示例代码，它实现了一个名为 "my-element" 的表单输入元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ----------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
---------- - -------
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
-
----- -
-------- ----
------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
----------- ---------- ------
-
----------- -
----------- - --- --- ------- -- -- -----
---
--------------------------
--------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的代码中，我们首先定义了一个 MyElement 类，它继承自 HTMLElement 类。在构造函数中，我们为元素添加了一个阴影根（Shadow Root），并向其添加了一个 input 元素和一些样式。
此时，我们可以在 HTML 代码中使用 <my-element></my-element>，来渲染出我们的自定义输入框。
结论
Custom Elements 是 Web Components 技术中非常重要的一项。使用 Custom Elements，开发者可以创建自己的 HTML 元素，以便在项目中构建可重用的组件。
在这篇文章中，我们了解了如何使用原生 JavaScript 和 class 关键字来创建一个自定义元素。我们还提供了示例代码，可以帮助读者了解 Custom Elements 的实际应用。
当你开始使用 Custom Elements 时，请记得记住这个技术的优缺点，以及如何最好地将其应用于您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6749124c93696b02680cd6e6