Custom Elements 是 Web Components 标准的一部分，具有定义和使用自定义 HTML 元素的能力。在 Custom Elements 中，元素的属性可以通过定义和使用 attributeChangedCallback() 方法来修改。
本文将介绍如何使用 attributeChangedCallback() 方法，以及如何在元素属性修改时执行一些操作。
attributeChangedCallback() 方法
Custom Elements 中，每个元素都可以定义 attributeChangedCallback() 方法，用于处理元素属性的更改。当元素的属性更改时，该方法将被调用。attributeChangedCallback() 方法拥有三个参数：
- attributeName: 表示属性名；
- oldValue: 表示属性更改之前的值；
- newValue: 表示属性更改之后的值。
attributeChangedCallback() 方法应该是一个公共方法，它将在元素的实例上调用，而不是原型。该方法使用一个 MutationObserver，以检查元素实例上属性的变化。
下面是一个示例，展示如何在自定义元素中使用 attributeChangedCallback() 来响应元素属性的更改。该示例中定义了一个 my-element 自定义元素，并在该元素的属性更改时将属性名和更改前后的值输出到控制台。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -----------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
----------------------------------- -----------示例：实现一个狗狗名字标签
下面是一个具体的示例，展示如何使用 attributeChangedCallback() 方法来更新自定义元素的属性。该示例实现了一个狗狗名字标签，当属性值发生更改时，会更新标签的文本。
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- -----------
----- ----------------
--------
----- ---------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ -------------
-
------------------- -
----- ---- - ------------------------------
----- ------- - ---------------------------- -- -----------
----- ------ - ------------------------ ---------
----------------------------
-
------------------------------ --------- --------- -
----- ------ - ----------------
----- ------- - ---------------------
------------------- - -------- -- ----------
-
-
------------------------------------- ------------
---------
-------
------
------------- ----------------------------------
-------
-------上面的代码中，当创建一个 <dog-name-tag> 元素时，会调用 connectedCallback() 方法。在 connectedCallback() 方法中，创建了一个文本节点，该节点的文本内容为元素的属性值（如果存在），或者为“Unknown”。
当元素的属性值更改时，会调用 attributeChangedCallback() 方法，并在该方法中更新标签的文本。更新标签文本采用了与初始文本相同的技术，即从元素的阴影根中获取现有文本，然后将其更新为一个新文本值。
总结
在 Custom Elements 中，属性的更改处理方法是 attributeChangedCallback() 方法。该方法允许开发人员响应元素属性的更改，并在属性更改时执行一些操作。
本文介绍了如何使用 attributeChangedCallback() 方法，并提供了一个展示了如何在自定义元素中使用该方法的示例。希望这些信息能够帮助您更好地理解 Custom Elements，并将其用于您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654362827d4982a6ebd1ced0