在前端开发中，Custom Elements（自定义元素）是一项非常有用的技术，它允许我们创建自定义的 HTML 元素，从而方便我们在代码中进行复用和维护。但是，对于自定义元素的样式控制，我们可能会遇到一些困难。好在，CSS 提供了丰富的样式控制能力，我们可以利用 CSS 来自定义 Custom Elements 的样式。
Custom Elements 简介
Custom Elements 是 Web Components 规范的一部分，它允许我们创建自定义的 HTML 元素。与普通的 HTML 元素不同的是，我们可以为 Custom Elements 定义行为和样式，并且可以在代码中进行复用和维护。
Custom Elements 的创建和使用非常简单，我们只需要使用 class 和 extends 关键字即可定义一个 Custom Element：
class MyElement extends HTMLElement {
// ...
}
customElements.define('my-element', MyElement);上面的代码定义了一个名为 my-element 的 Custom Element，它继承自 HTMLElement，并且可以通过 customElements.define() 方法进行注册。
自定义样式
Custom Elements 的样式控制可以通过标准的 CSS 来实现。我们可以使用 :host 伪类选择器来选择 Custom Element 自身，然后为其定义样式。例如，我们可以为 my-element 定义一个红色的背景色：
my-element {
display: block;
background-color: red;
}上面的代码中，我们使用 my-element 选择器选择了 Custom Element 自身，并为其定义了 display 和 background-color 样式。
除了使用 my-element 选择器，我们还可以使用 :host 伪类选择器来选择 Custom Element 自身。例如，我们可以使用下面的代码为 my-element 定义一个蓝色的背景色：
:host {
display: block;
background-color: blue;
}上面的代码中，我们使用 :host 伪类选择器选择了 Custom Element 自身，并为其定义了 display 和 background-color 样式。
子元素样式
除了自身样式之外，我们还可以为 Custom Element 的子元素定义样式。我们可以使用 ::slotted() 伪元素选择器来选择 Custom Element 中的子元素，并为其定义样式。例如，我们可以使用下面的代码为 my-element 中的所有 button 元素定义一个绿色的背景色：
my-element::slotted(button) {
background-color: green;
}上面的代码中，我们使用 ::slotted() 伪元素选择器选择了 Custom Element 中的所有 button 元素，并为其定义了 background-color 样式。
优化性能
在使用 CSS 自定义 Custom Elements 样式时，我们需要注意一些性能问题。由于 Custom Elements 可能会被多次使用，每一次使用都会触发一次样式计算和布局，因此我们应该尽量优化样式的性能。
一种常见的优化方式是使用 CSS 变量。我们可以将一些常用的样式属性定义为 CSS 变量，然后在 Custom Element 中使用这些变量，从而减少样式计算和布局的开销。例如，我们可以定义一个名为 --background-color 的 CSS 变量：
:root {
--background-color: red;
}
my-element {
background-color: var(--background-color);
}上面的代码中，我们在 :root 伪类中定义了一个名为 --background-color 的 CSS 变量，并在 my-element 中使用了这个变量。
结论
通过使用 CSS，我们可以轻松地自定义 Custom Elements 的样式。我们可以使用 my-element 或 :host 伪类选择器选择 Custom Element 自身，使用 ::slotted() 伪元素选择器选择 Custom Element 中的子元素，并使用 CSS 变量优化样式性能。这些技巧可以帮助我们更好地控制 Custom Elements 的样式，从而提高代码的可重用性和可维护性。
完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----------------
-------
----- -
------------------- ----
-
---------- -
-------- ------
----------------- ------------------------
-
--------------------------- -
----------------- ------
-
--------
-------
------
------------
-------------- ----------
-------------- ----------
-------------
--------
----- --------- ------- ----------- -
-- ---
-
----------------------------------- -----------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67622100856ee0c1d4fd8c7b