前言
Custom Elements 是 Web Components 标准中的一部分，它提供一种创建自定义 HTML 元素的方式。Custom Elements 可以帮助开发者封装组件的状态和行为，使得代码更可维护、可复用、可测试。本文将介绍 Custom Elements 如何管理组件状态和交互。
Custom Elements 基础
首先，我们先来回顾一下 Custom Elements 的基础知识。
定义 Custom Elements
定义 Custom Elements 需要使用 customElements.define 方法，并传入元素名称和元素类。元素类必须继承自 HTMLElement 类。
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化代码
}
}
customElements.define('my-element', MyElement);定义好 Custom Elements 后，就可以在 HTML 中使用了。
<my-element></my-element>
生命周期
Custom Elements 定义的元素有以下生命周期：
- constructor：元素被创建时调用。
- connectedCallback：元素被插入到文档时调用。
- disconnectedCallback：元素从文档中移除时调用。
- adoptedCallback：元素被移动到新文档时调用。
- attributeChangedCallback：元素属性发生变化时调用。
属性定义
Custom Elements 还可以定义属性。属性定义需要使用 observedAttributes 和 attributeChangedCallback 方法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
------------- -
--------
-- -----
-
------------------- -
-- ------------
--------------------------------- ---------
-
------------------------------ --------- --------- -
-- ----------
---------------------- ------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------Custom Elements 可以帮助开发者管理组件状态和交互。下面我们通过一个简单的例子来演示。
实现一个计数器组件
我们来实现一个简单的计数器组件。这个计数器组件有以下特性：
- 点击按钮可以增加计数器的值。
- 计数器值可以通过属性设置和获取。
- 当计数器值发生变化时，组件会触发自定义事件。
-- -------------------- ---- -------
----- -------------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
----- ------ - ---------------------------------
------------------ - ------ ----
----- ---- - -------------------------------
---------------- - ---------------------------
-------------------------------- -- -- -
----- ----- - ---------------------------------- - --
-------------------------- -------
---
------------------------
----------------------
------------------------
-
------------------- -
---------------------- ---------------------------- - ------- - ------ ---------- - ----
-
------------------------------ --------- --------- -
-- ----- --- -------- -
------------------------------------------------- - ---------
---------------------- ---------------------------- - ------- - ------ ---------------- - ----
-
-
--- ------- -
------ -----------------------------------
-
--- ------------ -
-------------------------- -------
-
-
---------------------------------------- ----------------在这个例子中，我们实现了一个 CounterElement 类，它继承自 HTMLElement。在 constructor 方法中，我们创建了一个包含按钮和计数器值的 div 元素，并将它添加到 Shadow DOM 中。在按钮的 click 事件中，计数器值增加并通过 setAttribute 方法设置。在 attributeChangedCallback 方法中，我们更新了计数器值的展示并触发自定义事件 count-changed。在 connectedCallback 方法中，我们在元素插入到文档中时触发了 count-changed 事件。
现在，我们就可以在 HTML 中使用这个计数器组件了。
<counter-element count="0"></counter-element>
<script>
const counter = document.querySelector('counter-element');
counter.addEventListener('count-changed', (event) => {
console.log(`Count changed to ${event.detail.count}`);
});
</script>使用 Custom Events 传递信息
在上面的例子中，我们使用了自定义事件 count-changed 来传递计数器值变化的信息。Custom Events 是传递信息的一种灵活而强大的方式，它可以携带任意类型的数据。下面是 Custom Event 的基本使用示例：
const event = new CustomEvent('my-event', { detail: { key: 'value' } });
element.dispatchEvent(event);
element.addEventListener('my-event', (event) => {
console.log(event.detail.key);
});在这个示例中，我们创建了一个名为 my-event 的 Custom Event，并将一个带有一个属性的对象传递给 detail 参数。然后我们调用元素的 dispatchEvent 方法触发事件。最后我们使用 addEventListener 方法来监听该事件，并获取 detail 属性中的值。
总结
本文介绍了 Custom Elements 如何管理组件状态和交互。我们使用了一个简单的计数器组件的例子来说明 Custom Elements 如何实现组件状态和行为的封装，并通过 Custom Event 的方式将组件内部的状态变化传递给外部。Custom Elements 是一种非常有用的 Web 开发技术，它可以帮助我们构建更好的组件化应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b399f968c7c53b06c0763