Custom Elements 是 Web Components 标准的其中一个组成部分。它们允许你定义自己的 HTML 元素，以及它们的行为和属性。在本文中，我们将详细讨论如何在 Web 页面中使用 Custom Elements，并提供一些示例代码。
创建 Custom Elements
要创建 Custom Elements，我们需要使用 class 和 window.customElements.define() 方法。以下是一个创建 Custom Elements 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ------------ - -
-------
----- -
-------- ------
-
-- -
------ ----
-
--------
---------- -----------
--
-
-
------------------------------------------ -----------
---------
-------
-------以上代码创建了一个名为 my-element 的 Custom Elements，并将其添加到了 HTML 页面中。注意到我们使用了 class 关键字声明了一个新的 MyElement 类，这个类继承自 HTMLElement。类中的 constructor 方法用于初始化元素。在上述示例中，我们使用 this.attachShadow({ mode: 'open' }) 方法创建了一个 Shadow DOM 树，并在其中添加了 CSS 样式和一个 h1 标签，用于显示 “Hello, World!” 字符串。
最后一行代码 window.customElements.define('my-element', MyElement); 将我们创建的 MyElement 类添加到 my-element 名称的 Custom Elements 中。
使用 Custom Elements
要使用 Custom Elements，我们可以像使用其他 HTML 标签一样使用它们。下面是一个使用刚刚创建的 my-element 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---------------
-------
------
-------------------------
------- -----------------------------
-------
-------在上面的代码中，我们添加了一个 my-element.js 文件，其中包含了我们在前文中创建的 MyElement 类。我们在 HTML 中使用 <my-element> 标签，就可以在页面上显示出我们定义的元素了。
自定义属性和事件
Custom Elements 可以使用自定义属性和事件，通过这种方式，我们可以为它们添加功能或更改样式。下面是一个示例，其中我们为 my-element 添加了一个新的 text 属性：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---------------
-------
------
----------- ------------ ---------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---- - --------------------------
------------------- ----- ------ ------------ - -
-------
----- -
-------- ------
-
-- -
------ ----
-
--------
----------------
--
-
-
------------------------------------------ -----------
---------
-------
-------在上面的示例中，我们添加了一个新的 text 属性，它包含了 Hello, World! 字符串。在构造函数中，我们使用了 this.getAttribute('text') 方法获取了这个属性的值，并将它插入到创建的 Shadow DOM 树中。
我们也可以为我们的 Custom Elements 添加事件。下面是一个示例，其中我们为 my-element 添加了一个 click 事件：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ------------ - -
-------
----- -
-------- ------
-
-- -
------ ----
-
--------
---------- -----------
--
-
------------------- -
------------------------------ -- -- -
-------------- -----------
---
-
-
------------------------------------------ -----------
---------
-------
-------在上面的示例中，我们使用 connectedCallback() 方法添加了一个事件监听器，当用户点击 my-element 时，便会触发这个事件并弹出一个警告框。
总结
Custom Elements 允许我们在我们的 Web 页面中创建自定义 HTML 元素，并将它们的行为和属性进行自定义。以上是如何创建、使用和扩展 Custom Elements 的简要介绍。希望本文能够帮助你进一步学习和了解这个特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f2101968c7c53b0d8611e