前言
Custom Elements 是 Web Component 标准的重要组成部分，它允许我们自定义 HTML 元素并在 JavaScript 中进行操作。在实际开发中，我们经常需要通过属性来设置 Custom Elements 的状态和行为。本文将介绍在 Custom Elements 中如何拦截并处理属性修改，以及如何应用到实际场景中。
理解属性
在 Custom Elements 中，属性是用来控制元素状态和行为的一种机制。当你设置元素的属性时，元素可以响应属性的变化，并相应地更新自身的状态。
Custom Elements 的属性本质上是一个映射表，将 JavaScript 属性映射到 HTML 属性。例如，如果你创建了一个 Custom Element，并定义了一个 name 属性，那么在 JavaScript 中访问这个属性时，实际上是在访问元素的 getAttribute('name') 方法。当你修改这个属性时，实际上是在调用元素的 setAttribute('name', value) 方法。
拦截属性修改
在 Custom Elements 中，我们可以通过一些内置 API 来拦截和处理属性的修改。其中，最常用的两个 API 分别是 attributeChangedCallback 和 observedAttributes。
attributeChangedCallback
attributeChangedCallback 方法会在元素的某个属性发生变化时被调用。该方法接收三个参数，分别是属性名称、旧的属性值和新的属性值。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------------------------ --------- --------- -
---------------------- --------- ------- ---- ------------- -- ----------------
-
-
--------------------------------------- ---------------上述代码定义了一个 Custom Element custom-element，并观察了一个叫做 name 的属性。当 name 属性发生变化时，attributeChangedCallback 方法将被调用，并输出属性变化的信息。需要注意的是，在定义 Custom Element 时，需要确保元素的名称符合自定义元素命名规范，即包含至少一个短横线。
observedAttributes
observedAttributes 属性是一个数组，指定了 Custom Element 需要观察的属性名称。当其中任何一个属性发生变化时，就会触发元素的 attributeChangedCallback 方法。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ -------- -------
-
------------------------------ --------- --------- -
---------------------- --------- ------- ---- ------------- -- ----------------
-
-
--------------------------------------- ---------------上述代码观察了两个属性，name 和 age。当其中任何一个属性发生变化时，都会触发 attributeChangedCallback 方法。
应用场景
拦截属性修改在 Custom Elements 中具有广泛的应用场景。这里列举几个典型的应用场景。
表单验证
当我们创建一个表单元素时，需要对用户输入的内容进行验证。此时我们可以拦截元素属性的修改，当用户输入内容符合特定的规则时，才允许修改属性的值。例如，下面的代码演示了一个自定义的输入框元素，当输入的内容包含空格时，禁止输入。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
------------------------ ---------
----- ----- - --------------------------------
------------------------------- ----- -- -
-- ----------------------------- -- --- --- -
-----------------------
- ---- -
-------------------------- --------------------
-
---
------------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
-------------------------------------------- - ---------
-
-
-
--------------------------------- ---------数据绑定
在许多框架中，往往需要实现数据绑定的功能。当模型数据发生变化时，需要同步更新视图的状态。这个过程中，就需要拦截 Custom Element 的属性修改，以便在模型数据变化时，同步更新视图绑定的属性。
例如，下面的代码演示了一个使用数据绑定的 Custom Element。当数据模型 name 的值发生变化时，就会更新元素的 name 属性，同时也会更新元素显示的名字。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------------ ---------
-
------ --- -------------------- -
------ ---------
-
-------- -
------------------------- - -
----------- ----------------------------------
--
-
------------------- -
--------------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
--------------
-
-
-
----- ---- - ------ --------
----- ------- - ---------------------------------------
----------------------------- -- -
--------------------------- ---- -
----- -
------ -------- - -----
--
---------- -
-------- - ---- - ------
------------------------- -------
-
---
---
-----------------------------------css 变量
CSS 变量可以使开发者自由定义变量，以便在样式表中进行使用。在 Custom Elements 中，我们可以通过拦截属性修改，来实现对 CSS 变量的动态设置。
例如，下面的代码展示了一个可以动态设置颜色的按钮。当我们修改 color 属性时，按钮将会自动更新颜色为对应的值。
-- -------------------- ---- -------
--------- ---------------
-------
------ -
----------------- -------------
------ ------
-------- -----
------- -----
-------------- ----
-
--------
------- ----------------------------------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------
----- ------- - ---------------------------------
------------------------ ------------------------------
----------- - -----------------------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
--------------------------------- ----------
-
-
-
---------------------------------- ----------
---------
-------
--------- -
------- -----
-------- -------------
-
--------
---------- --------------- ------------------
---------- ------------------- ------------------
---------- ----------------- ------------------总结
通过拦截属性修改，我们可以对 Custom Elements 进行更加精细的控制，以适应各种不同的应用场景。我们可以通过 attributeChangedCallback 和 observedAttributes API 来实现属性的拦截和设置。在实际开发中，我们可以根据需求选择不同的方案来实现自定义元素的属性控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a0fef0add4f0e0ff927b0e