什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它是一种自定义 HTML 元素的方法。通过 Custom Elements，开发者可以创建自己的 HTML 元素，这些元素可以像原生 HTML 元素一样使用，并且可以被其他开发者引用和重用。
Custom Elements 最重要的特点是它可以封装复杂的功能和交互，让开发者可以更加轻松地使用和维护自己的代码。
如何创建 Custom Elements
创建 Custom Elements 需要遵循一些规范和约定，下面是一个简单的例子：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ------ - ------------------- ----- ------ ---
-- -- --- --
----- --- - ------------------------------
--------------- - ------- --------
-- -- --- --- ------ --- -
------------------------
-
-
----------------------------------- -----------
---------上面的代码中，我们创建了一个叫做 my-element 的 Custom Element。我们先定义了一个 MyElement 类，这个类继承自 HTMLElement，它是所有 HTML 元素的基类。
在 MyElement 类的构造函数中，我们创建了一个 Shadow DOM，并添加了一个简单的 DOM 元素到 Shadow DOM 中。最后，我们使用 customElements.define 方法将 my-element 注册为 Custom Element。
Custom Elements 的生命周期
Custom Elements 有自己的生命周期，包括 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback 等方法。
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ------- --------
------------------------
-
------------------- -
-------------------------
-
---------------------- -
----------------------------
-
----------------- -
-----------------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------
---------上面的代码中，我们为 MyElement 类定义了 connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback 四个方法。这些方法会在 Custom Element 的生命周期中被调用。
Custom Elements 的样式
Custom Elements 的样式可以使用 Shadow DOM 来封装，这样可以避免样式的污染和冲突。
-- -------------------- ---- -------
-------------------------
-------
---------- -
-------- ------
------ -----
------- -----
----------------- -----
-
---------- --- -
------ -----
-
--------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ------- --------
------------------------
-
------------------- -
------------------------- - -
-------
----- -
-------- ------
------ -----
------- -----
----------------- -----
-
--- -
------ -----
-
--------
----------- ------------
--
-
-
----------------------------------- -----------
---------上面的代码中，我们为 MyElement 类添加了样式。我们可以看到，我们使用了 :host 选择器来选择 Custom Element 自身，这样可以确保样式只会应用到当前的 Custom Element 中。
总结
Custom Elements 是 Web Components 的重要特性之一，它可以让开发者自定义 HTML 元素，并且可以封装复杂的功能和交互。在创建 Custom Elements 时，我们需要遵循一些规范和约定，并且需要了解 Custom Elements 的生命周期和样式的使用方法。通过 Custom Elements，我们可以让我们的代码更加简洁、易于维护和重用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e20e7eb4cecbf2d3f220d