在前端开发中，我们经常会使用自定义元素来创建独特的组件并添加样式。然而，当多个自定义元素嵌套在一起时，可能导致样式失效的问题。在本文中，我们将介绍这个问题的原因，并提供解决方案。
原因
自定义元素是使用 Web Components 技术创建的，它们具有自己的 Shadow DOM。当自定义元素嵌套在一起时，其 Shadow DOM 也会嵌套在一起。这样，父组件的样式无法渗透到子组件中，导致样式失效。
解决方案
为了解决这个问题，我们可以使用 CSS 的 ::part 和 ::theme 伪元素来为自定义元素的 Shadow DOM 添加样式。这两个伪元素可以让我们在 Shadow DOM 内部通过类名来选择样式。
::part 伪元素用于选择 Shadow DOM 中的子元素，例如：
my-element::part(sub-element) {
color: red;
}这段代码将为 my-element 自定义元素中名为 sub-element 的子元素添加红色的颜色。
::theme 伪元素用于选择 Shadow DOM 中的父元素，并且可以选择一个主题。例如：
my-element::theme(red-theme) {
background-color: red;
}这段代码将会选择 my-element 自定义元素的父元素并将其背景颜色改为红色。red-theme 是我们提供的主题名称。
在实际使用中，我们可以通过代码来动态地为自定义元素添加主题。例如：
const element = document.querySelector('my-element');
element.setAttribute('theme', 'red-theme');示例代码
下面是一个自定义元素嵌套的例子。在这个例子中，我们有一个 button-counter 自定义元素，用于计数按钮的点击次数。我们还有一个 fancy-button-counter 自定义元素，它是 button-counter 的扩展，并添加了一些额外的样式。
-- -------------------- ---- -------
---- ------------------- ---
----------
-------------- ----- ------------------------------
--------
----- ------------- ------- ----------- -
------------- -
--------
---------- - --
----- -------- - ---------------------------------------------------------------
----- ----- - ------------------------------------- ------
----- ---------- - ------------------- ----- ------ ---
------------------------------
----- ------ - -----------------------------------
----- ----- - -----------------------------------
-------------------------------- -- -- -
-------------
----------------- - -----------
---
-
-
---------------------------------------------- ---------------
---------
------------- -------------------- ---- -------
---- ------------------------- ---
----- ---------------- ---------------------------
----------
-------
-------------- -
----------------- -----
------- -----
------ ------
---------- -----
-------- ---- -----
-
-------------------- -
----------------- -----
-
-------------- -
----------------- -----
-------------- ----
------ ------
---------- -----
-------- - -----
--------- ---------
-
--------
---------------------------------
--------
----- ------------------ ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------------------------
----- ----- - ------------------------------------- ------
----- ---------- - ------------------- ----- ------ ---
------------------------------
-
-
---------------------------------------------------- --------------------
---------
-----------在这个例子中，fancy-button-counter 自定义元素继承了 button-counter 自定义元素，并使用 ::part 来为 Shadow DOM 中的元素添加样式。我们也可以动态地为自定义元素添加主题：
const element = document.querySelector('fancy-button-counter');
element.setAttribute('theme', 'red-theme');结论
在使用自定义元素时，我们可能会遇到样式失效的问题，特别是在嵌套自定义元素时。使用 CSS 的 ::part 和 ::theme 伪元素可以让我们为 Shadow DOM 添加样式并解决这个问题。在实际使用中，我们可以通过代码来动态地为自定义元素添加主题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670be7ca66ef9cf37facfc61