前言
在开发大型的 Web 应用时，项目中通常会存在大量的组件。为了避免全局 CSS 样式污染，很多开发者会将组件内的样式都加上 scoped 的修饰符。但随着组件数目的不断增多，这样的写法会显得非常麻烦。此时，shady-css-scoped-element 这个 npm 包便出现在了我们的视野中。它可以通过 Web Components 的 Shadow DOM 技术，让组件内的样式不受全局 CSS 的干扰，从而减少开发者的工作量。
安装
在使用 shady-css-scoped-element 前，我们需要先安装它:
npm install shady-css-scoped-element
使用
下面，我们来演示一下在组件内使用 shady-css-scoped-element 的过程。
首先，我们需要导入该模块，然后创建一个新的类，继承自 shadyCSS，并调用其中的 prepareTemplate() 方法。如下所示:
-- -------------------- ---- -------
------ - -------- - ---- ---------------------------
------ ----- ----------- ------- --------------------- -
------------- -
--------
-- ------ --- --------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
----------------- ----
-
-- -
------ ------
-
--------
---------- -----------
--
-- ------- --- --------
------------------- ----- ------ ---
--------------------------------------------------------------
----------------------------- - - ---------- -------------- --
------------------------------------------------------- ----------------
-
-在上述代码中，shadyCSS() 方法会返回一个 mixin 函数，该函数的作用是将 shadyCSS 的方法和属性混入到我们的组件类中。prepareTemplate() 方法接收两个参数——首先是创建好的模板，紧接着是元素的名称。这个名称会被用来生成样式的作用域。
接下来，我们需要在 HTML 页面中使用该组件，如下所示:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- --- ----------------- ------- ------ ----------------------------- ------- ------------- ------------------------------- ------- -------
此时，我们就成功地在页面中引入了组件。如果你现在刷新浏览器，将看到一个红色背景下的白色标题。
使用 Shady DOM
你可能会注意到，在我们的代码中，使用了 this.attachShadow({ mode: 'open' }) 方法来创建 Shadow DOM。这就要求我们必须启用 Shady DOM，才能够使用 shady-css-scoped-element。不过，这并不难。只需要在 in index.html 的页面头部引入这个 js 文件即可:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.0/webcomponents-bundle.js"></script>
下面，我们来看一下 Shady DOM 的具体作用。
假设我们在页面中使用了以下的样式，来设置 h1 标题的默认样式：
h1 {
color: blue;
}如果我们不使用 Shadow DOM，相当于在全局进行了样式的定义，即这个样式将对页面中所有的 h1 标题生效。而在使用 Shadow DOM 后，只有处于 shadow tree 中的 h1 标题会受到影响——这就是 Shady DOM 的作用。比如，我们可以创建一个另外的 HTML 页面，引用以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ -----------
-------
-- -
------ -----
-
--------
-------
------
-----------------------------
------- ------------- -------------------------------
-------
-------这个页面中，我们使用了与之前相同的组件。不过，这里还多了一个全局样式，定义了 h1 标题的默认样式。但在运行时，我们会发现，页面中的组件标题和全局样式不同。这是因为，我们使用了 Shadow DOM，它不会受到全局样式的影响。
总结
在这篇文章中，我们讲解了如何使用 npm 包 shady-css-scoped-element 来简化组件开发中的样式处理工作。我们演示了其具体用法，并且介绍了 Shady DOM 的相关知识。希望通过这篇文章，读者们能够更好地理解 Web Components 技术，并尝试使用该工具来提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5effc0a8403f2923b035bc3d