自定义元素（Custom Elements）是 Web Components 规范中的一部分，可以让开发者定义自己的 HTML 标签，并为这些标签定义行为和样式。其中使用属性是自定义元素的重要特性之一。在这篇文章中，我们将深入探讨 Custom Elements 中的属性操作与监听。
属性操作
在 JavaScript 中操作元素属性是常见的需求，自定义元素也不例外。在 Custom Elements 中，我们可以通过 attributeChangedCallback 和 observedAttributes 这两个 API 来实现属性操作。
observedAttributes
observedAttributes 是自定义元素的一个静态属性，定义了哪些属性需要被观察。当被观察的属性发生变化时，attributeChangedCallback 方法将自动被调用。
-- -------------------- ---- -------
----- --------- ------- ----------- -
-- ----------
------ --- -------------------- -
------ ----------
-
------------------- -
-- --- ----- -------
---------- - ------
-
------------------------------ --------- --------- -
-- - ----- ---------------------
-- ----- --- -------- -
---------------- - ---------
-
-
-在上面的示例中，observedAttributes 方法声明了 color 属性需要被观察，而 attributeChangedCallback 则在 color 属性被修改时改变元素样式。
直接访问属性
除了通过 attributeChangedCallback 方法监听属性变化外，我们还可以直接访问自定义元素的属性。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
-- --- ----- -------
---------- - ------
-- -- ----- -------
---------- - -------
-
--- ------------ -
-------------------------- -------
-
--- ------- -
------ ---------------------------
-
-在上面的示例中，color 属性可以通过 set 方法进行设置，通过 get 方法进行获取。这使得我们可以更加便捷地操作自定义元素的属性。
属性监听
除了在 Custom Elements 中直接操作属性外，我们还可以利用 MutationObserver 对元素的属性变化进行监听。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
-- --- ----- -------
---------- - ------
-- -- ----- -----------
----- -------- - --- -------------------------------- -- -
--- ---- -------- -- -------------- -
-- -------------- --- ------------ -- ---------------------- --- -------- -
---------------- - -----------------------------------------------------
-
-
---
---------------------- - ----------- ---- ---
-
--- ------------ -
-------------------------- -------
-
--- ------- -
------ ---------------------------
-
-在上面的示例中，我们使用 MutationObserver 监听了 color 属性的变化，并在发生变化时修改元素的样式。
总结
在 Custom Elements 中，属性操作是非常重要的功能。通过 observedAttributes 和 attributeChangedCallback 这两个 API 可以实现属性的监听和操作，而直接访问属性和使用 MutationObserver 则更加便捷。希望本文的内容可以对您在 Custom Elements 中使用元素属性提供一些有用的指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d984f968c7c53b0002eae