首先让我们了解 Custom Elements 和 Shadow DOM 是什么
Custom Elements
Custom Elements 是 Web Component 的一部分，是一种自定义 HTML 元素的机制。通过 Custom Elements，可以定义新的 HTML 元素，并在标记中使用它们，就像使用普通的 HTML 元素一样。
Shadow DOM
Shadow DOM 是 Web Component 的另一部分，是一种浏览器原生支持的封装 DOM 的方法。使用 Shadow DOM 可以将一个组件的样式和行为封装起来，避免样式和脚本的冲突。
样式覆盖问题
使用 Custom Elements 和 Shadow DOM 可以实现组件的封装和复用，但是也会带来一些问题，其中一个常见的问题就是样式覆盖问题。当一个组件的 Shadow DOM 样式被主页元素的样式覆盖时，就会产生样式覆盖问题。
例如，在下面的示例中，我们使用 Custom Elements 创建了一个按钮组件，并将其封装在 Shadow DOM 中。
-- -------------------- ---- -------
---- ----------- ---
--------- ---------------------
-------
------ -
-------- -------------
----------------- -----
------ ------
------- -----
-------- ----
-------------- ----
------- --------
-
--------
--------
-------------
---------
-----------
--------
----- -------- - ---------------------------------------------------
----- ------ ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
-
-
---------------------------------- --------
---------在上面的代码中，我们将 button 标签的样式封装在了 Shadow DOM 中。现在，我们将这个组件嵌入到主页中，并设置主页元素样式：
-- -------------------- ---- -------
---- ---------- ---
-------
------ -
----------------- ----
------ ------
-
--------
---------------- --------------在上面的代码中，我们设置了全部 button 标签的样式，所以会导致我们定义的组件的样式被覆盖。在浏览器中打开这个页面，你会发现组件的样式被主页元素的样式覆盖了。
解决样式覆盖问题
有多种方法可以解决样式覆盖问题，下面我们介绍其中两种方法：
使用 Custom Properties
设置 Custom Properties 可以让我们在 Shadow DOM 中使用主页元素的样式。
在主页元素中设置 Custom Properties：
-- -------------------- ---- -------
---- ---------- ---
-------
----- -
-------------------------- ----
--------------- ------
-
------ -
----------------- -------------------------------
------ --------------------
-
--------
---------------- --------------在组件中使用 Custom Properties：
-- -------------------- ---- -------
---- ----------- ---
--------- ---------------------
-------
------ -
-------- -------------
----------------- -------------------------------
------ --------------------
------- -----
-------- ----
-------------- ----
------- --------
-
--------
--------
-------------
---------
-----------
--------
----- -------- - ---------------------------------------------------
----- ------ ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
-
-
---------------------------------- --------
---------在上面的代码中，我们在主页元素中设置了 Custom Properties，并在组件中使用了这些 Custom Properties，这样就可以解决样式覆盖问题。
使用 ::part 和 ::theme
part 和 theme 是 Shadow DOM 的两个伪类，可以帮助我们解决样式覆盖问题。
在组件中使用 part：
-- -------------------- ---- -------
---- ----------- ---
--------- ---------------------
-------
------ -
-------- -------------
----------------- -----
------ ------
------- -----
-------- ----
-------------- ----
------- --------
-
------------------- -
------ ------
-
--------
------- -------------
-------------
---------
-----------
--------
----- -------- - ---------------------------------------------------
----- ------ ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
-
-
---------------------------------- --------
---------在上面的代码中，我们使用了 part 伪类，将 label 部分的样式分离出来，并使用 CSS 的 part 属性将其绑定到 button 元素上。
在主页元素中使用 theme：
-- -------------------- ---- -------
---- ---------- ---
-------
------ -
-------- -------------
----------------- ----
------ ------
------- -----
-------- ----
-------------- ----
------- --------
-
---------------------- -
------ ------
-
--------
---------------- --------------在上面的代码中，我们使用了 theme 伪类，将样式应用于所有具有特定主题的元素，使用 CSS 选择器将其绑定到 my-button 元素的 label 部分上。
总结
在本文中，我们介绍了 Custom Elements 和 Shadow DOM，以及样式覆盖问题及其解决方法。使用 Custom Properties、part 和 theme 等方法，可以让我们更好地使用 Custom Elements 和 Shadow DOM，避免样式冲突，提高组件的可维护性和重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc80315ad90b6d0428ebe4