在 Web 开发中，Custom Elements 是一种用于创建自定义 HTML 标签的 API。Custom Elements 可以让我们将一些常见的 HTML 元素封装成自定义元素，并添加一些自定义功能。除此之外，Custom Elements 还允许我们在元素上动态修改 CSS 样式，以适应不同的数据状态和视觉需求。
本文将介绍在 Custom Elements 中如何动态修改 CSS 样式，为读者提供深度学习和指导意义。其中，我们将使用一个示例 Custom Element 来演示上述技术，并解释每一步所涉及的原理和功能。
创建 Custom Element
首先，我们需要创建一个 Custom Element。在本例中，我们将创建一个元素 <message-box>，它可以接受一些文本输入，并根据输入内容来修改元素的样式。
下面是实现代码：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- ---- --
----- -
-------- ------
------ ------
------- ------
------- --- ----- ------
-------- -----
------------ ------ ---------- ------ -----------
---------- -----
-
--------
---------- -----------
------ ------------
--
---------- - ---------------------------------------
-
-
------------------------------------------- ------------在这个示例中，我们定义了一个类 MessageBox，并继承了 HTMLElement 类。我们在构造函数中使用了 attachShadow 方法来创建了一个 shadow DOM，并将其设置为 open 模式，这样我们可以访问到 shadow DOM 中的所有元素和样式。然后，我们使用 innerHTML 属性向 shadow DOM 中添加了一些 HTML 和默认样式，并保存了一个 input 元素的引用。
最后，我们使用 window.customElements.define 方法将自定义元素注册到了 window 对象中，这样它就可以在页面中使用了。
监听输入事件
接下来，我们需要监听 input 元素的输入事件，以便在用户输入文本时动态修改元素的样式。我们可以通过 addEventListener 方法来实现这一功能。
下面是实现代码：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- ---- --
----- -
-------- ------
------ ------
------- ------
------- --- ----- ------
-------- -----
------------ ------ ---------- ------ -----------
---------- -----
-
-- -------- --
---------------- -
----------------- --------
------ ------
-
-- ------- ---------- --
------------------------ -
----------------- ------
------ ------
-
-- ------- -------- --
---------------------- -
----------------- ----
------ ------
-
--------
---------- -----------
------ ------------
--
---------- - ---------------------------------------
------------------------------------ -- -- -
------------------------- ------------------
---
-
-
------------------------------------------- ------------在这个示例代码中，我们添加了三个 CSS 样式规则来描述元素在不同状态下的样式：文本为空时的默认样式、文本中含有 "success" 时的样式、以及文本中含有 "error" 时的样式。它们分别应用了 [text='']、[text*='success']、以及[text*='error'] 选择器。
我们还在 constructor 函数中添加了一个 input 事件监听器，以便在用户输入文本时动态修改元素的样式。在事件监听器函数中，我们使用 setAttribute 方法将当前文本值保存在元素的 text 属性中。这个 text 属性将成为选择器的一部分，以便我们可以根据文本值动态修改元素的样式。
绑定选择器和属性
现在，我们已经创建好了 Custom Element 和文本输入监听器，并定义了不同文本状态下的样式。但是，我们还需要一个方式来将选择器和 text 属性绑定在一起，以便在输入事件发生时，让样式动态更新。
我们可以通过在 attributeChangedCallback 方法中监听 text 属性的变化，并根据新值来更新元素的样式。
下面是实现代码：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- ---- --
----- -
-------- ------
------ ------
------- ------
------- --- ----- ------
-------- -----
------------ ------ ---------- ------ -----------
---------- -----
-
-- -------- --
---------------- -
----------------- --------
------ ------
-
-- ------- ---------- --
------------------------ -
----------------- ------
------ ------
-
-- ------- -------- --
---------------------- -
----------------- ----
------ ------
-
--------
---------- -----------
------ ------------
--
---------- - ---------------------------------------
------------------------------------ -- -- -
------------------------- ------------------
---
-
------------------------------ --------- --------- -
-- ----- --- ------- -
-------------------------- - ---
---------------- - ---
-- ---------------- --- --- -
-----------------------------
-
-
-
------ --- -------------------- -
------ ---------
-
-
------------------------------------------- ------------在这个示例代码中，我们添加了 attributeChangedCallback 方法来监听 text 属性的变化。当 text 属性发生变化时，方法内部会判断当前文本值的状态，并根据它们的值来修改元素的样式。
注意，我们还在 static get observedAttributes() 方法中返回了一个数组 ['text']，以便 Custom Element 知道需要观察哪些属性。
总结
在 Custom Elements 中动态修改 CSS 样式可以让我们实现复杂的视觉效果，并让元素更加具有交互性和实用性。我们可以使用 Class 和伪类选择器来定义不同状态下的样式，使用 attributeChangedCallback 方法和 observedAttributes 属性来监听属性的变化，并根据属性值来修改元素的样式。
我们希望这篇文章能够帮助读者了解 Custom Elements 的常见用法，并提供了一个实例来示范如何实现动态 CSS 样式。希望读者在实际开发中能够灵活运用这些技术，为用户带来更好的体验和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c6921968c7c53b07769c5