什么是 Custom Elements？
Custom Elements 是一个 Web Component 的规范，它可以让开发者自定义一个 HTML 元素，并在使用时像普通的 HTML 元素一样进行使用、传值和事件交互等操作。这个特性是面向细节复杂，结构相对固定的组件进行开发的。
Custom Elements 不仅可以增强组件的重用性和可维护性，还能帮助开发者提高页面性能和提高交互体验。
如何使用 Custom Elements？
1. 定义 Custom Elements
为了定义一个 Custom Elements，我们需要使用 window.customElements.define() 方法。此方法的第一个参数是新元素的名称，第二个参数是继承的现有元素的名称，通常设置为 HTMLElement。
class CustomElement extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define('custom-element', CustomElement);2. 使用 Custom Elements
定义 Custom Elements 后，我们可以像使用 HTML 标记一样在 HTML 中直接使用我们定义的元素名称。
<custom-element></custom-element>
3. 自定义 Custom Elements
Custom Elements 允许开发者使用 connectedCallback() 和 disconnectedCallback() 两个生命周期方法来自定义 Custom Elements，connectedCallback() 在元素实例连接到页面 DOM 时调用，而 disconnectedCallback() 在元素实例从页面 DOM 断开时调用。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----------- - --
-
------------------- -
-------------- - ---------- ------------------ ----------------------------
------------------------------------------------------ -- -- -
--------------
----------------------------------- - ------- ----------------
---
-
---------------------- -
----------------------------------------------------------
-
-
---------------------------------------------- ---------------上面的代码实现了一个带有计数器的自定义元素，它有一个按钮和一个用于展示计数的元素。当用户点击按钮时，计数器会增加 1，并在页面上更新显示。
4. Custom Elements 的样式和样式处理
Custom Elements 使用原生独立作用域的 CSS，开发者可以在元素的样式声明中通过 :host 来自定义样式，例如：
-- -------------------- ---- -------
-------------- -
-------- ------
-
-------------- - -
------ -----
-
-------------- ------ -
----------- ------------
-5. Custom Elements 的属性处理
Custom Elements 可以使用 attributeChangedCallback() 方法在属性变化时进行触发。例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
---------- - ---
-
------------------- -
-------------- - -----------------------
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
---------- - ---------
----------------------------------- - -----------
-
-
-
---------------------------------------------- ---------------在 HTML 中，我们可以使用属性来传递要显示的文本。
<custom-element text="Hello World"></custom-element>
6. Custom Elements 的事件处理
Custom Elements 能够像普通的 HTML 元素一样响应事件，可以通过自定义事件来实现。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
---------------------- -------------------------- -
-------- -----
------- -
-------- ------ ------
-
----
---
-
-
---------------------------------------------- ---------------在 HTML 中，我们可以使用 addEventListener() 方法来监听 Custom Elements 的自定义事件。
<custom-element id="myElement"></custom-element>
<script>
const customElement = document.querySelector('#myElement');
customElement.addEventListener('customClick', (event) => {
console.log(event.detail.message);
});
</script>总结
本文介绍了 Custom Elements 的基本使用方法以及自定义元素的生命周期，样式、属性和事件处理等细节。使用 Custom Elements 可以极大地提高组件的可重用性和可维护性，同时还能帮助开发者提高页面性能和提高交互体验。
虽然 Custom Elements 的浏览器支持程度并不是很高，但相信随着 Web Component 规范的更加普及，Custom Elements 必将成为未来 Web 开发的重要一环。
参考文献：
- Custom Elements - Web APIs | MDN (https://developer.mozilla.org/en-US/docs/Web/API/Custom_Elements_API)
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f6c29980a9b385b8ecc5e