Custom Elements 是 Web Components 的核心技术之一，可以定义自己的 HTML 标签及其行为，使用 JavaScript 封装复杂的组件。在实际使用 Custom Elements 时，我们不仅需要定义组件的外观和功能，还需要为它们设置样式，以达到更好的用户体验。本文将探讨 Custom Elements 中如何添加样式，以及一些示例代码。
为 Custom Elements 添加样式
添加样式的方式和传统的 HTML 元素一样，有以下几种：
1. 内部样式表
-- -------------------- ---- -------
----------------
-------
-- ----- --
-- -
------ ----
-
- -
---------- -----
-
--------
--------- -----------
------- -- - ------ ------------
-----------------上面的代码中，我们为 Custom Elements 添加了一个内部样式表，样式表中定义了 h1 和 p 元素的样式，在 Custom Elements 标签中使用了这两个元素。
2. 外部样式表
-- -------------------- ---- -------
------
----- ---------------- --------------------------
-------
------
----------------
--------- -----------
------- -- - ------ ------------
-----------------
-------上面的代码中，我们使用 link 元素引入了一个外部样式表，然后在 Custom Elements 标签中直接使用 h1 和 p 元素。
3. JavaScript 控制样式
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- ----- --
-- -
------ ----
-
- -
---------- -----
-
--------
--------- -----------
------- -- - ------ ------------
--
----- ----- - --------------------------------
----------------- - -
-- ---------- ------- --
----- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- --------
---
------------------------------
-
-
--------------------------------------- ---------------上面的代码中，我们在 JavaScript 中定义了 Custom Element 的样式，包括内部样式表和 JavaScript 控制样式。在 constructor 中，我们通过 shadowRoot 的 innerHTML 将内部样式表和 HTML 元素添加到 Custom Element 中，然后通过 document.createElement('style') 创建了一个 style 元素，用于动态添加样式，最后通过 shadowRoot.appendChild() 将这个 style 元素添加到 Custom Element 中。
示例
我们来看一个完整的 Custom Element，其中添加了样式，可以作为参考。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
-- ----- --
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
----------------- --------
------- --
-------- --
-
-- -
------ ----
---------- ----
-------------- --
-
- -
---------- ------
----------- --
-
--------
---- ------------------
--------- -----------
------- -- - ------ ------------
------
--
-
-
--------------------------------------- ---------------我们将 Custom Elements 元素放在一个 container 容器中，设置了居中对齐、100% 高度、浅灰色背景等基本样式。h1 元素设置为红色、4em 的字体大小，且没有底部间距。p 元素设置为 1.2em 的字体大小，且没有顶部间距。
结论
Custom Elements 是一种强大的技术，如果灵活使用，可以帮助我们实现更具有可维护性和可扩展性的 Web 应用程序。在为 Custom Elements 添加样式时，我们可以使用传统的内部和外部样式表，也可以通过 JavaScript 动态添加样式。希望本文能对大家掌握 Custom Elements 的样式添加有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67300c28eedcc8a97c90edb0