Custom Elements 是 Web Components 的一部分，它是一种在原生 JavaScript 中创建定制化 DOM 元素的方法。使用 Custom Elements，我们可以将组件们包装为自定义元素，使得我们可以在整个应用程序中调用它们，并进行样式化和自定义操作。
使用 Custom Elements
创建一个自定义元素
为了使用 Custom Elements，我们首先需要定义一个新的元素。我们使用 document.createElement('element-name') 方法来创建一个自定义元素：
class MyCustomElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyCustomElement);如上所示，我们创建了一个自定义元素 my-element，并定义了它的行为，如何使用它，以及它可以接受的属性等等。
定义元素的行为
定义自定义元素的行为需要在其类的构造函数中进行。我们可以添加事件侦听器、属性及其变化的侦听器，甚至可以添加模板或 Shadow DOM。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
------------------------------ --------------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
-------- -----
----------------- --------
------- --- ----- -----
-------------- ----
-
--------
--------- -- -- ------ -------------
--
------------------- ----- ------ ---
--------------------------------------------------------------
-
--------- -
-------------------- ----------
-
-
----------------------------------- -----------------如上所示，我们定义了一个 onClick 函数以供使用。还定义了一个 Shadow DOM，在这里添加了样式和元素的空白内容。
使用自定义元素
添加自定义元素与添加常规元素时一样，只需使用 document.createElement('element-name') 方法创建即可。
<body> <my-element></my-element> <script src="main.js"></script> </body>
如上所示，我们只需要在 HTML 中使用 <my-element> 标签，然后在 JavaScript 中引用我们定义的自定义元素即可。
设置自定义元素的属性
我们可以设置自定义元素的属性，这些属性可以在自定义元素内部使用。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ----- - ---------------------------
----- -------- - -----------------------------------
------------------ - -
-------------------
--
------------------- ----- ------ ---
--------------------------------------------------------------
-
-
----------------------------------- -----------------
----- --------- - -------------------------------------
------------------------------- --- --------
-------------------------------------如上所示，我们通过 getAttribute() 方法获取了名称为 label 的属性，并将其显示在 Shadow DOM 中。
总结
Custom Elements 是一项增强 JavaScript 功能的有用工具，让我们可以创建自定义元素，并将它们用于 Web 应用程序的多个部分。使用 Custom Elements，我们可以添加自定义行为和样式，以及通过设置属性来进行配置。Custom Elements 让创建和使用 Web 组件变得更加容易、更加方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64708372968c7c53b0ea5537