随着 Web 前端发展，组件化开发已经成为了前端的一个重要的开发方式。Custom Elements 是 Web Components 的一个重要特性，它允许开发者自定义 Web 页面自己的 HTML 元素，并搭配上自己的 JavaScript 逻辑去实现一些丰富的交互逻辑。
在开发 Custom Elements 组件的时候，一个重要的问题就是如何引入样式。对于一个好的组件，样式方面的考虑是非常重要的一个环节，良好的样式支持会给用户带来更好的交互体验，从而提升整个组件的可用和美观度。
本文就围绕 Custom Elements 组件中的样式引入方式进行分析，进一步探讨如何在组件中引入样式。
1. 使用 link 标签引入外部样式
使用 link 标签引入外部样式是 Web 开发中使用最多的一种方式。同样，也可以在 Custom Elements 组件中使用这种方式引入样式。为了更好的说明，下面以一个最简单的 Custom Element 组件为例，来说明如何使用 link 标签引入外部样式。
具体示例代码如下：
-- -------------------- ---- -------
---- -------------- ---
----------
------------------------------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - --------
-------------------------------------
---------
----- ---------- - ------------------- ----- ------ ---------------
------------------------
--
-
-
----------------------------------------- ----------
---------
---- ------- ---
----- ---------------- ---------------------- --
---- ---- ---
--------- ------------------------
-------
------ -
------- -----
----------- --------
------ -----
-------- -------
-------------- ----
------- --------
-
--------
-------------
-----------可以看到，在 my-button.html 文件中，我们通过 link 标签引入了 my-button.css 样式。同时，我们在 Custom Element 组件的模块内，还定义了一份与样式相关的 CSS 模板片段 my-button-template，用于定义我们想要的样式。
这样做的好处是，在外部样式表中，一些全局的样式可以放在统一的地方管理，同时，也可以避免 CSS 的冲突和易于维护，因为每个组件有自己专属的 CSS 就好了。
2. 使用 import 引入外部样式
除了使用 link 标签引入外部样式，还可以使用 import 引入外部样式。下面是具体的示例代码：
-- -------------------- ---- -------
---- -------------- ---
----------
------------------------------
-----------
------- --------------
------ --- ---- ------------------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - --------
-------------------------------------
---------
----- ---------- - ------------------- ----- ------ ---------------
------------------------
--
----- ----- - --------------------------------
----------------- - ------------
------------------------------ -----------------------
-
-
----------------------------------------- ----------
---------
---- ---- ---
--------- ------------------------
-------------
-----------与 link 标签引入外部样式相比，在使用 import 引入样式时，我们需要将 my-button.css 定义一个变量并导出，再在组件内部使用 import 导入样式，通过 style.textContent 赋值到 <style> 标签中。
当然，使用 import 引入样式的好处也很明显，它可以做到完全将组件内部的样式和外部隔离，减少 CSS 的冲突问题，同时，可以方便地组织 CSS。
3. 直接在模板中定义内部样式
除了上述两种方式，还可以在模板中直接定义内部样式。这种方式需要主要避免多个组件之间的样式冲突。 示例代码如下：
-- -------------------- ---- -------
---- -------------- ---
----------
-------
------ -
------- -----
----------- --------
------ -----
-------- -------
-------------- ----
------- --------
-
--------
------------------------------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-----------------------
-------------------------------------------------------------------------- -----
--
-
-
----------------------------------------- ----------
---------
---- ---- ---
--------- ------------------------
-------------
-----------这种方式的好处是，样式与组件直接绑定在一起，完全避免了样式的引入问题，同时减少了代码的冗余。但是缺点也很明显，就是无法做到样式复用，只能应用于单个组件。
总结
以上就是 Custom Elements 组件中的样式引入方式的三种方法，选用哪种方式完全取决于具体情况。使用 link / import 引入外部样式可以做到样式的复用和归纳，而内部定义样式方式可以避免样式冲突问题和代码的冗余。设计和开发组件之前，一定要好好考虑和设计好样式方案，这样才能做出更加美观和易用的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463164e968c7c53b041a44b