在 Web Components 中，Custom Elements 是其中最为核心的一个 API。它允许我们创建自定义的 HTML 元素，并在 DOM 中使用它们。这样一来，我们就可以通过自定义元素来扩展 HTML 语言本身，实现更加丰富和灵活的页面效果。
Custom Elements 的基本用法
Custom Elements 的基本用法非常简单，我们只需要使用 customElements.define() 方法来定义一个自定义元素即可。该方法接受两个参数，第一个参数为自定义元素的名称，第二个参数为一个 JavaScript 类，用于定义该元素的行为和样式。
下面是一个简单的示例代码，展示了如何使用 Custom Elements 定义一个名为 my-element 的自定义元素：
-- -------------------- ---- -------
---- ------- ---
--------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
-
----------------------------------- -----------
---------
---- ----------- ---
-------------------------在上面的代码中，我们首先定义了一个名为 MyElement 的 JavaScript 类，该类继承自 HTMLElement，并在构造函数中为该元素的 textContent 属性赋值。接着，我们使用 customElements.define() 方法来定义了一个名为 my-element 的自定义元素，并将其与 MyElement 类关联起来。
最后，在页面中使用 <my-element> 标签就可以创建一个自定义元素了。由于我们在 MyElement 类中设置了该元素的 textContent 属性，因此该元素的内容将会显示为 Hello, World!。
为自定义元素添加样式
在定义自定义元素时，我们可以通过给该元素添加 CSS 样式来改变其外观。为了实现这一点，我们可以使用 Shadow DOM 技术来为自定义元素创建一个独立的 DOM 树，然后在其中添加样式。
下面是一个示例代码，展示了如何为自定义元素添加样式：
-- -------------------- ---- -------
---- ------- ---
--------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ------ - ------------------- ----- ------ ---
-- ---- ------ --------
----- ---- - -------------------------------
---------------- - ------- --------
---------------- - ------
-- - ------ ----- ------ --- -
-------------------------
-
-
----------------------------------- -----------
---------
---- ----------- ---
-------------------------在上面的代码中，我们首先在 MyElement 类的构造函数中创建了一个 Shadow DOM，并将其设置为 open 模式，表示外部代码可以访问该 Shadow DOM。接着，我们创建了一个 <span> 元素，并为其设置了 textContent 和 color 样式。最后，我们将该 <span> 元素添加到 Shadow DOM 中，从而改变了自定义元素的外观。
自定义元素的生命周期
在 Custom Elements 中，每个自定义元素都有自己的生命周期。当我们在页面中创建一个自定义元素时，系统会自动调用该元素的一系列生命周期函数，以便让我们在不同的阶段对该元素进行操作。
下面是自定义元素的生命周期函数列表：
constructor(): 构造函数，用于创建自定义元素的实例。在该函数中，我们可以初始化元素的属性和状态。connectedCallback(): 当自定义元素被添加到页面中时，系统会调用该函数。在该函数中，我们可以执行一些初始化操作，比如创建子元素、添加事件监听器等。disconnectedCallback(): 当自定义元素从页面中移除时，系统会调用该函数。在该函数中，我们可以执行一些清理操作，比如移除子元素、取消事件监听器等。attributeChangedCallback(name, oldValue, newValue): 当自定义元素的属性发生变化时，系统会调用该函数。在该函数中，我们可以根据新的属性值来更新元素的状态。
下面是一个示例代码，展示了如何使用自定义元素的生命周期函数：
-- -------------------- ---- -------
---- ------- ---
--------
----- --------- ------- ----------- -
------------- -
--------
------------ - --
-
------------------- -
--------------- - -------------- -- -
---------------
---------------- - --------- -----------------
-- ------
-
---------------------- -
-------------------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------- - ---------
-
-
-
----------------------------------- -----------
---------
---- ----------- ---
----------- -------------------------在上面的代码中，我们首先定义了一个名为 MyElement 的自定义元素，并在其构造函数中初始化了一个名为 counter 的状态。接着，在 connectedCallback() 函数中，我们使用 setInterval() 方法来定时更新元素的 textContent 属性，从而实现了一个简单的计数器。
在 disconnectedCallback() 函数中，我们清除了之前创建的定时器，以便释放资源。在 attributeChangedCallback() 函数中，我们监听了自定义元素的 color 属性，并在该属性发生变化时更新了元素的样式。
总结
Custom Elements 是 Web Components 中最为核心的一个 API，它允许我们创建自定义的 HTML 元素，并在 DOM 中使用它们。通过自定义元素，我们可以扩展 HTML 语言本身，实现更加丰富和灵活的页面效果。在使用 Custom Elements 时，我们需要掌握其基本用法、样式设置和生命周期函数等方面的知识，以便更好地创建和管理自定义元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65545a7bd2f5e1655de0fa4d