Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素，从而提高 Web 应用程序的可重用性和可维护性。但是，在使用 Custom Elements 时，我们可能会遇到动态属性无法正确处理的问题，本文将介绍如何解决这个问题。
问题描述
在使用 Custom Elements 时，我们可以定义一些属性，例如：
----------- -------------------------
我们可以在 Custom Element 中通过以下方式获取该属性：
----- --------- ------- ----------- -
------------------- -
----- ---- - --------------------------
------------------ -- ----
-
-这很好用，但当我们尝试在运行时更改这个属性时，就会遇到问题：
----- ------- - ------------------------------------- ---------------------------- --------
在上面的代码中，我们尝试将 name 属性从 John 更改为 Mary，但是 MyElement 中的 connectedCallback 并不会被调用，因此我们无法获取到新的属性值。
解决方案
为了解决上述问题，我们需要使用 MutationObserver 监听属性的更改。MutationObserver 是一个 JavaScript API，它可以观察 DOM 树的变化并在发生变化时执行回调函数。
我们可以在 Custom Element 中使用 MutationObserver 监听属性的更改：
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
---------- - -----
-
------------------- -
---------- - --------------------------
------------------------ -- ----
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
---------- - ---------
------------------------ -- ----
-
-
-
----------------------------------- -----------在上面的代码中，我们使用 observedAttributes 静态 getter 方法指定要观察的属性列表。然后，在构造函数中初始化属性的初始值。在 connectedCallback 中，我们获取属性的初始值并打印它。在 attributeChangedCallback 中，我们检查是否更改了属性值，如果更改了，则更新内部 _name 属性的值并打印它。
现在，当我们尝试更改 name 属性时，attributeChangedCallback 将被调用，并且 _name 属性的值将被更新。
----- ------- - ------------------------------------- ---------------------------- --------
结论
在使用 Custom Elements 时，我们可能会遇到动态属性无法正确处理的问题。为了解决这个问题，我们可以使用 MutationObserver 监听属性的更改。通过这种方式，我们可以确保在运行时更改属性时，Custom Element 中的属性也会被正确更新。
示例代码
完整的示例代码如下：
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------- -------- ---------------
-------
------
----------- -------------------------
--------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
---------- - -----
-
------------------- -
---------- - --------------------------
------------------------ -- ----
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
---------- - ---------
------------------------ -- ----
-
-
-
----------------------------------- -----------
----- ------- - -------------------------------------
---------------------------- --------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672843932e7021665e1fa163