在使用 Web Components 开发自定义组件时，由于 Web Components 的 Shadow DOM 特性，可以有效避免组件内部的样式与全局样式产生冲突，但有时还是会出现全局 CSS 污染问题，本文将从实际案例出发，探讨解决方法。
案例背景
在一个由 Web Components 构成的项目中，存在一个 "spinner" 的自定义组件，实现了一个旋转动画效果，并在全局样式中定义了一些旋转动画的 keyframes，如下所示：
---------- ------ -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-在使用 "spinner" 组件的页面上，引入了一些第三方 UI 库的样式，其中也定义了一个名为 rotate 的旋转动画 keyframes。结果发现，使用 "spinner" 组件时，它的旋转动画效果被第三方 UI 库的样式覆盖了。
解决方法
方法一：使用 scoped CSS
scoped CSS 是一种比较古老的 CSS 实现方式，可以使用 scoped 属性将样式限定在组件内部。这种方式不需要修改全局样式，也不需要依赖 Shadow DOM，但需要编写一些额外的 CSS。
----------
---- ----------------
---- ----------------------------
------
-----------
--------
------ ------- -
-- ---
------- -----
-- ---
-
---------
------ -------
-------------- -
---------- ------ ---- -------- -------
-
--------可惜的是，scoped CSS 被大多数现代浏览器所废弃，只在少数浏览器中支持，如 Chrome 等。
方法二：使用 Shadow DOM
Shadow DOM 是 Web Components 的一个核心特性，可以将一个 DOM 节点及其子节点、CSS 样式等封装在一个隔离的 DOM 树中，与外部 DOM 树隔离，避免了样式之间的冲突。
----------
---- ----------------
---- ----------------------------
------
-----------
--------
------ ------- -
-- ---
------- -----
-- ---
-
---------
-------
-------------- -
---------- ------ ---- -------- -------
-
--------使用 Shadow DOM 的方式非常简单，只需要将 "shadow" 设置为 true 即可。
方法三：使用 CSS Modules
CSS Modules 是一种处理 CSS 的方案，可以将组件的样式与全局样式分开，避免了全局 CSS 污染问题，也不需要编写额外的样式代码。该方案需要使用专门的构建工具或插件来实现。
-------------- - ---------- ------ ---- -------- ------- -
使用 CSS Modules 时，需要将组件的样式文件做一下配置，在 webpack 中配置比较简单：
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -
--------------- -----------------------------------
--
--
--
--
--
--
-使用上述配置，webpack 会将每个 CSS 类名转换成类似 "spinner__inner--abc12" 的形式，几乎不可能与其他组件的样式产生冲突。
总结
在 Web Components 的开发中，全局 CSS 污染问题是一项常见的挑战，但有多种方法可以解决。在实际开发中，我们可以根据具体情况选择使用 scoped CSS、Shadow DOM 或 CSS Modules 等方案。要想提高 Web Components 的开发效率和质量，掌握这些技术点是必不可少的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648d87e648841e9894bd8382