前言
Custom Elements 允许开发者创建自己的 HTML 元素，这些元素可以扩展传统 HTML 元素的功能。在现代 Web 应用程序中，Custom Elements 已经成为了一个必不可少的工具。
Custom Elements 具有强大的自定义功能，在功能和表现方面都比一般 HTML 元素更加丰富。为了让开发者更好的使用 Custom Elements，需要学习如何添加和管理自定义样式。
本文旨在介绍如何为 Custom Elements 添加样式，并提供实用的示例代码和指导意义，帮助开发者更好地应用这一技术。
添加样式的基本方式
Custom Elements 添加样式的基本方式与传统 HTML 元素相同，有多种不同的方法。以下是几个添加样式的基本方式：
内联样式
可以在元素的 style 属性中添加内联样式:
<my-element style="background-color: red;"></my-element>
样式表
在 HTML 网页中可以使用CSS样式表为元素添加样式。在 Custom Elements 中也可以采用此方式。
-- -------------------- ---- -------
------
-------
---------- -
----------------- ----
-
--------
-------
------
-------------------------
-------JavaScript
也可以通过 JavaScript 为元素添加样式。这通常是必要的，当自定义元素的样式和行为需要动态地更改时，此时 JavaScript 就显得十分必要。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- --- - ------------------------------
------------- - ------- --------
------------------------
------------------------- - ------
-
-
----------------------------------- -----------将样式封装在 Shadow DOM 中
在 Custom Elements 中使用 Shadow DOM 是一个相当流行的方式，这为开发者提供了一种可靠的方法来隐藏里层元素的实现细节。如何将样式封装在 Shadow DOM 中呢？
可以在 Custom Elements 类的构造函数中创建 Shadow DOM，且只需简单地将样式应用在 Shadow DOM 内部即可，如下所示：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- --- - ------------------------------
------------- - ------- --------
------------------------
----- ----- - --------------------------------
----------------- - -
--- -
----------------- ----
-
--
--------------------------
-
-
----------------------------------- -----------为 Shadow DOM 中的元素添加样式
当样式封装在 Shadow DOM 中时，内部的子元素也被隔离，如何为 Shadow DOM 中的元素添加样式呢？
:host 函数
:host 函数允许在 Shadow DOM 中为自定义元素本身添加样式，而不是其内部的子元素。
:host {
background-color: yellow;
}::slotted() 函数
::slotted() 函数允许根据具体的选择器为 Shadow DOM 中分配的元素添加样式。这里和外部样式相比没有任何区别。
::slotted(p) {
font-weight: bold;
}Shadow DOM 中的类名
也可以使用类指定 Shadow DOM 中的元素的样式，可以在元素中添加类名，然后在 Shadow DOM 中为其选择器设置样式。
<style>
my-element .green {
background-color: green;
}
</style>
<my-element>
<div class="green">Hello, world.</div>
</my-element>在示例代码中，为了更改内部元素的样式，类名 .green 被应用于内部 div 元素。在 MyElement 类的 Shadow DOM 中，使用选择器 my-element .green 应用样式。
最佳实践
对于简单样式，使用内联样式。 当仅需要简单的、静态的样式，内联样式通常是最好的选择。
对于复杂样式，使用样式表。 当需要处理较大的块级样式或要使用众多选择器时，可以使用样式表，并在 HTML 中导入它们。
使用 Shadow DOM 封装样式。 包装样式在 Shadow DOM 中可以保证该样式只应用于特定元素，而不会影响其他元素或全局 CSS。
避免在 Shadow DOM 外部更改样式。 不要在 Shadow DOM 外部更改样式或样式表。这种做法可能导致样式修改成为未来的不可维护状态。
考虑使用 CSS 自定义属性。 CSS 自定义属性是一种流行的技术，它可以让开发者在运行时将样式应用到元素，从而简化自定义元素的样式管理。
结论
自定义元素中的样式管理对于任何 Web 开发者都是一个重要的技能。本文介绍了几种方法，在 Shadow DOM 中封装和管理样式，并提供了最佳实践和示例代码，以帮助开发者更好地应用这项技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f83ba5f5512810265036e