前言
Custom Elements 是 Web Components 标准的核心，是一种自定义 HTML 元素的 API。通过 Custom Elements 可以创建单独的自定义组件，并且这些组件可以像普通 HTML 标签一样被使用和操纵。
以下内容将从零开始，带领读者一步步学习 Custom Elements 的创建和使用，包括初、中、高阶的教程，希望能够帮助读者深入理解 Custom Elements 的使用。
初阶教程
1. 创建 Custom Elements
首先，需要创建一个继承自 HTMLElement 的类，并用 customElements.define 方法注册它：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);这样就创建了一个名为 my-element 的 Custom Element。
2. 使用 Custom Elements
将自定义元素放入 HTML 中，可以像其他 HTML 元素一样使用它：
<my-element></my-element>
3. 添加属性和方法
我们可以在上面创建的 MyElement 类中添加属性和方法。
例如，我们可以添加一个单击事件监听器，在单击元素时控制台输出一条消息：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
------------------------
---
-
-
----------------------------------- -----------通过在 constructor 中添加事件监听器，我们实现了一个简单的单击事件响应功能。
4. 设置元素属性
我们可以为自定义元素添加属性，并在属性值发生变化时做出响应。这里我们使用 attributeChangedCallback 方法来实现。
例如，我们为自定义元素添加一个 text 属性，当它的值变化时，将它赋值给元素的第一个子节点：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
---------------------------- - ---------
-
-
-
----------------------------------- -----------
-- ------- ---------- ----- ---- --
----- ------- - -------------------------------------
---------------------------- ------ ---------5. 修改样式
我们可以为自定义元素添加样式。此处我们使用 Shadow DOM 技术，它允许我们将元素的 DOM 和样式封装在其中，避免与来自外部的样式发生冲突。
例如，我们设置元素背景颜色为灰色：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - --- ---------
------------------------- - -------
------------------------
-
-
----------------------------------- -----------这样，我们就创建了一个自定义元素，它的背景颜色为灰色。
中阶教程
1. 继承已有元素
通过继承已有的标准元素，我们可以从中获益。例如，我们可以通过继承 button 元素来创建一个自定义的按钮：
-- -------------------- ---- -------
----- -------- ------- ----------------- -
------------- -
--------
------------------------------ -- -- -
------------------------
---
-
-
---------------------------------- --------- - -------- -------- ---注意在自定义元素注册时，需要使用 extends 属性声明这是一个继承了哪个标准元素的 Custom Element。
2. SLOT
SLOT 是 Custom Elements 标准的重要特性之一，它允许您向自定义元素注入动态内容。变量中的 slot 将在自定义元素内部的模板中用于指定插入内容的位置。
例如，在一个自定义弹出框中，我们可以将内容放在 <slot> 标签中：
-- -------------------- ---- -------
--------- ---------------------
-------
------- -
----------------- -----
------- --- ----- -----
-------------- ----
-------- -----
-
--------
---- ---------------
-------------
------
-----------
--------
----- ------ ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------
----- ------ - ------------------- ----- ------ ---
-----------------------------------------------------
-
-
--------------------------------- --------
---------现在，当我们将要插入的内容放在 <x-dialog> 标签内，将在弹出框中显示：
<x-dialog>Hello World!</x-dialog>
3. 自定义事件
Custom Element 可以定义自己的事件。通过自定义事件，我们可以扩展标准事件处理，控制元素的行为或与其他元素交互。
例如，我们可以为自定义元素添加一个 modify 事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------- -- -- -
-------------------------
---
-
---------- -
----- ----- - --- ----------------------
--------------------------
-
-
----------------------------------- -----------在 connectedCallback 中，我们为元素添加了一个 modify 事件的监听器。在 doModify 方法中，我们将创建一个新的 CustomEvent 对象，并使用 dispatchEvent 方法触发这个事件。
4. 绑定数据
我们可以通过在自定义元素内部使用数据绑定模板或单向数据绑定属性，将数据绑定到自定义元素上。
例如，我们为自定义元素添加一个 data 属性，在属性值变化时显示它的值：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
---------------- - ---------
-
-
--- ----------- -
------------------------- -------
-
--- ------ -
------ --------------------------
-
-
----------------------------------- -----------使用以下代码设置 data 属性后，MyElement 元素将显示属性值：
<my-element data="Hello World"></my-element>
高阶教程
对于高级开发者来说，如果需要为更复杂的应用程序创建自定义元素，他们需要深入了解 Shadow DOM，事件系统，通信以及传递属性等相关主题。这里我们简单介绍几个方面。
1. Shadow DOM 的详细操作
Shadow DOM 是 Web Components 技术中的一个底层特性。它允许开发人员创建封装了其样式、标记和行为的可重复使用的 Web 组件。使用 Shadow DOM，我们可以将 DOM 结构和样式封装在元素的 Shadow DOM 中，从而避免 CSS 样式冲突。
例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-- --------- ------ --- ----
----- ----- - --- ----------------------- -
-------- ------
----------- -----
--------- -----
---
----- ------ - ------------------- ----- ------ ---
-- ------------ ---
----- --------- - ------------------------------
------------------- - ----------- - ----------------- ----- ---------
-------- ------------
-- - --- -- ------ ----
------------------------------
-- -- ------ --- ------
--------------------------
-
-
--------------------------------------- ---------------2. 过滤属性
我们可以使用过滤器拦截其他人传递给自定义元素的属性。
例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
-- ---------------------------------------- -
----------------------- ----------
-
-
-
--- -------------- -
---------------------------- -------
-
--- --------- -
------ -----------------------------
-
--- --------------- -
------ ----- ---- -----
-
-
--------------------------------------- ---------------如果属性 allowed 的值不在 allowedValues 的列表中，我们通过 setAttribute 将属性的值重置为以前的值。
3. 全局事件通信
Custom Elements 之间通信的一种方式是使用 CustomEvent 对象。我们可以创建自定义事件，添加需要传递的数据，然后通过派发事件来发送数据。
例如:
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ----- - ----------------------------------------
--------------------------------- ------- -- -
-------------------- ---- -------- --------------
---
------------------------
----- ----- - --- ----------------------------- -
------- ------ --------
-------- -----
--------- -----
---
------------------------------
-
-
--------------------------------------- ---------------
----- ------------ ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------------------- ------- -- -
------------------- ---------- --------------
----- ----------- - --- ---------------------- -
------- --------- -----------------
---
--------------------------------
---
-
-
-------------------------------------- --------------在 ParentElement 中创建一个 ChildElement 元素并添加一个事件监听器，以便在 ChildElement 中接收 message 事件并在控制台中记录它。然后创建一个名为 global-message 的事件，并在全局上触发它。
最后，在 ChildElement 元素上附加一个事件监听器，以在 global-message 事件派发时记录一个消息，并在此处发出一个名为 message 的事件，将从 global-message 事件中提取的消息通过事件细节传递给 ParentElement。
总结
Custom Elements 是 Web Components 标准非常重要的一部分，通过创建自定义元素，我们可以方便的扩展 HTML 元素，并且使它们具有复杂的功能。本文从初、中、高阶三个方面详细讲解了 Custom Elements 的应用，希望能为读者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491378e48841e9894f385cc