Custom Elements 是 Web Components 的一部分，它可以让开发者创建自定义 HTML 元素，这些元素能够扩展现有的 HTML 元素，并提供自己的行为和样式，它们可以在任何支持 Web Components 的浏览器上使用。在 Custom Elements 中，我们可以利用属性监听和状态管理来改变元素行为和显示。
属性监听
属性监听指的是当元素的属性值发生变化时，Custom Elements 可以监听到这个变化，并作出相应的反应。通过属性监听，我们可以让元素的行为发生变化。
在 Custom Elements 中，我们可以使用 attributeChangedCallback 方法来监听元素属性的变化。这个方法会在元素的属性值发生变化时被自动调用。下面是一个示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
--------------------------------------- --------- --------- -
-- -------------- --- --------------- -
------------------ ------- ---- ----------- -- --------------
-- -- --------- ----
-
-
-
----------------------------------- -----------在这个示例中，我们定义了一个名为 my-element 的 Custom Element，它监听了一个名为 my-attribute 的属性。当此属性的值发生变化时，attributeChangedCallback 方法会被调用。
状态管理
状态管理指的是 Custom Elements 在自身内部维护一些状态，当状态发生变化时，元素的行为或样式也会相应地发生变化。通过状态管理，我们可以让元素更加灵活。
在 Custom Elements 中，我们可以使用属性或者内部变量来维护元素的状态。下面是一个使用属性来维护状态的示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------- - ------
-
------ --- -------------------- -
------ ------------
-
--------------------------------------- --------- --------- -
-- -------------- --- --------- -- -------- --- --------- -
------------- - -------- --- -------
--------------
-
-
--- --------- -
------ --------------
-
--- -------------- -
----- -------- - --------------
------------- - ---------------
---------------------------- --------------------------
-- --------- --- -------------- -
--------------
-
-
-------- -
-- --------------- -
------------------------------
- ---- -
---------------------------------
-
-
-
------------------------------------ -----------在这个示例中，我们定义了一个名为 my-checkbox 的 Custom Element，并通过属性 checked 来维护元素的状态。当 checked 属性被修改时，attributeChangedCallback 方法会被调用，然后我们调用一个名为 update 的方法来更新元素的行为。update 方法会根据 checked 的属性值来添加或移除名为 checked 的 CSS 类。
通过这种方式，我们可以用 Custom Elements 来实现自定义的带有状态的 HTML 元素，从而提供更加灵活的功能和行为。
结论
通过属性监听和状态管理，我们可以让 Custom Elements 更加灵活和强大。在开发自定义 HTML 元素时，我们应该尽可能地利用它们。在实际开发中，我们还可以借助一些框架和库来更好地管理元素的属性和状态，比如 Vue 和 React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6701f71f7a9ed5a06b6efee4