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