Custom Elements 是 Web Components 中的一个重要概念，它允许开发者自定义 HTML 元素并在页面中使用。这种方式可以提高代码的可重用性和可维护性，同时也有助于组件化开发，使得页面的结构更加清晰和易于理解。
Custom Elements 的基本用法
在使用 Custom Elements 之前，我们需要定义一个新的 HTML 元素。定义新元素的方式有两种，一种是继承自 HTMLElement，另一种是继承自其他 HTML 元素，例如继承自 input 或者 button。
-- -------------------- ---- -------
---- --- ----------- ---
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ---------- ------------
-
-
----------------------------------- -----------
---------
---- --- ----- ---
--------
----- ------- ------- ---------------- -
------------- -
--------
--------- - -------
---------- - ------- --------
-
-
--------------------------------- -------- - -------- ------- ---
---------在上面的代码中，我们定义了两个新的 HTML 元素，分别是 my-element 和 my-input。其中，my-element 继承自 HTMLElement，my-input 继承自 input。
在定义完新元素之后，我们就可以在页面中使用它们了。
<my-element></my-element> <input is="my-input">
Custom Elements 的高级用法
除了基本用法之外，Custom Elements 还有一些高级用法，例如属性监听、插槽等。
属性监听
我们可以使用 attributeChangedCallback 方法来监听元素属性的变化。
-- -------------------- ---- -------
----------- -----------------------------
--------
----- --------- ------- ----------- -
------ --- -------------------- -
------ --------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------
---------在上面的代码中，我们监听了 my-element 元素的 data-name 属性的变化。当属性值发生变化时，会触发 attributeChangedCallback 方法。
插槽
插槽是一种非常有用的功能，它可以让我们在自定义元素内部插入任意 HTML 内容。
-- -------------------- ---- -------
------------
-- --------------------- ----------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-----
------ ------------
----- ----------------------
------
--
------------------- ----- ------ ---
--------------------------------------------------------------
-
-
----------------------------------- -----------
---------在上面的代码中，我们在 my-element 元素内部插入了一个 p 元素，并使用了 slot 属性来标记它的位置。在 MyElement 类的构造函数中，我们使用了 Shadow DOM 来创建一个新的 DOM 树，并插入了一个插槽元素。
总结
Custom Elements 是 Web Components 中的一个重要概念，它可以让我们自定义 HTML 元素并在页面中使用。在使用 Custom Elements 的过程中，我们需要定义新元素、监听属性变化、使用插槽等功能。这些功能可以大大提高代码的可重用性和可维护性，同时也有助于组件化开发，使得页面的结构更加清晰和易于理解。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65853cbfd2f5e1655dfe73e2