在 Web 开发中，我们经常需要创建自定义的 HTML 元素。传统的做法是通过 JavaScript 动态创建元素，然后添加到 DOM 树中。这种做法虽然可以实现自定义元素的功能，但是缺乏一些重要的特性，如样式和事件的继承，以及自定义元素的语义化。为了解决这些问题，W3C 提出了 Custom Elements 规范，允许开发者创建自定义的 HTML 元素，并提供了更加灵活的扩展机制。
在 Custom Elements 中，属性和属性监听是非常重要的概念。本文将介绍 Custom Elements 中的属性和属性监听，以及如何使用它们来实现自定义元素的功能。
属性
在 Custom Elements 中，属性是自定义元素的重要组成部分。属性允许开发者向自定义元素传递数据，并且可以在 JavaScript 中访问和修改。
定义属性
要定义自定义元素的属性，可以使用 observedAttributes 静态属性。observedAttributes 是一个字符串数组，包含了自定义元素的所有属性名。例如，下面的代码定义了一个名为 my-element 的自定义元素，并声明了两个属性：name 和 age。
----- --------- ------- ----------- -
------ --- -------------------- -
------ -------- -------
-
-
----------------------------------- -----------设置属性
要设置自定义元素的属性，可以使用 setAttribute() 方法。例如，下面的代码设置了 my-element 元素的 name 属性和 age 属性。
----- ---- - ------------------------------------- ------------------------- ------ ------------------------ ------
获取属性
要获取自定义元素的属性，可以使用 getAttribute() 方法。例如，下面的代码获取了 my-element 元素的 name 属性和 age 属性。
----- ---- - -------------------------- ----- --- - -------------------------
监听属性变化
当自定义元素的属性发生变化时，可以通过 attributeChangedCallback() 方法来监听。attributeChangedCallback() 方法在属性发生变化时自动调用，可以获取属性名、旧值和新值三个参数。例如，下面的代码监听了 my-element 元素的 name 属性变化。
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
---------------------------------- --------- --------- -
--------------- ----------- - ----------- -- --------------
-
-
----------------------------------- -----------属性监听
在 Custom Elements 中，属性监听是非常重要的概念。属性监听允许开发者在属性变化时执行一些自定义的逻辑。
定义属性监听器
要定义属性监听器，可以使用 Object.defineProperty() 方法。Object.defineProperty() 方法允许开发者定义对象的属性，包括属性名、属性值、可写性、可枚举性和可配置性。例如，下面的代码定义了一个名为 name 的属性，以及它的 getter 和 setter 方法。
----- --------- ------- ----------- -
------------- -
--------
---------- - ---
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
---------------------- --------------------------- - ------- - ----- - ----
-
-
----------------------------------- -----------在上面的代码中，我们使用 this._name 来存储属性值，而不是直接使用 this.name。这是因为在 getter 和 setter 方法中，我们不能直接访问 this.name，否则会导致递归调用。另外，我们在 setter 方法中触发了一个名为 name-changed 的自定义事件，用于通知其他组件属性值的变化。
监听属性变化
要监听属性变化，可以使用 addEventListener() 方法。例如，下面的代码监听了 my-element 元素的 name-changed 事件。
----- ---- - ------------------------------------- ------------------------------------- ------- -- - --------------- ---- ---- ------------------------ --- --------- - -----
在上面的代码中，当 name 属性发生变化时，我们会收到一个名为 name-changed 的自定义事件。事件的 detail 属性包含了属性的新值，可以用于更新 UI 或执行其他逻辑。
总结
在 Custom Elements 中，属性和属性监听是非常重要的概念。属性允许开发者向自定义元素传递数据，并且可以在 JavaScript 中访问和修改；属性监听允许开发者在属性变化时执行一些自定义的逻辑。通过合理地使用属性和属性监听，可以实现更加灵活和强大的自定义元素，提高 Web 应用的可维护性和扩展性。
示例代码
下面是一个完整的示例代码，演示了如何定义自定义元素的属性和属性监听器。
----- --------- ------- ----------- -
------ --- -------------------- -
------ -------- -------
-
------------- -
--------
---------- - ---
--------- - --
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
---------------------- --------------------------- - ------- - ----- - ----
-
--- ----- -
------ ----------
-
--- ---------- -
--------- - ----------------
---------------------- -------------------------- - ------- - ------ --------- - ----
-
---------------------------------- --------- --------- -
-- --------- --- ------- -
--------- - ---------
- ---- -- --------- --- ------ -
-------- - ---------
-
-
-
----------------------------------- -----------
----- ---- - -------------------------------------
------------------------- ------
------------------------ ------
------------------------------------- ------- -- -
--------------- ---- ---- ------------------------
---
------------------------------------ ------- -- -
--------------- --- ---- ------------------------
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6614cd34d10417a22250d68c