随着 Web 开发的快速发展，定制化的需求逐渐增多。在现代 Web 开发中，Custom Elements 已经成为了非常流行的定制化 Web 组件模型，它允许创建自定义 HTML 元素，给开发者提供了更好的组织和管理DOM的方式。
然而，Custom Elements 与其他 Web 组件模型不同之处在于，它并没有提供一种内置的样式隔离的方式，因而多个 Custom Elements 在同一个页面上使用时容易互相影响。为了解决这个问题，我们需要使用一些技巧来实现样式隔离。
使用 Shadow DOM
Shadow DOM 是一个重要的 Web 技术，它允许将 DOM 树和样式树隔离起来，从而避免 DOM 和样式之间的交叉影响。对于 Custom Elements，使用 Shadow DOM 可以非常方便地实现样式隔离。
-- -------------------- ---- -------
--------- -----------------------
-------
-- ----------- ------ --- --
----- -
-------- ------
-------- -----
----------------- --------
-------------- ----
-
-- -
---------- -----
------ -----
-
- -
---------- -----
------ -----
-
--------
-----
--------- -----------
------- -- -- ------ ------------
------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------------------
---------------------------------------------------------
-
-
------------------------------------------------- -----------------
---------在上面的示例代码中，我们将 Custom Elements 定义在 MyCustomElement 类中，并在构造函数中使用 attachShadow 方法创建一个 Shadow DOM。我们将 template 标签中的内容添加到 Shadow DOM 中，并使用 cloneNode 方法防止 DOM 节点的重复使用。此时，样式只会作用于 MyCustomElement 元素的 Shadow DOM，而不会影响到其他元素。
使用 ::part 和 ::theme
除了使用 Shadow DOM，CSS 还提供了 ::part 和 ::theme 伪元素来实现 Custom Elements 的样式隔离。
::part 伪元素上传输的是 Custom Elements 的内部元素的样式，类似于 :host 伪元素。::theme 伪元素则是与 Custom Elements 相关的主题样式。我们可以通过这两个伪元素来区分 Custom Elements 的不同部分的样式。
-- -------------------- ---- -------
--------- -----------------------
-------
----- -
-------- ------
-------- -----
----------------- --------
-------------- ----
-
------------- -
---------- -----
------ -----
-
--------------- -
---------- -----
------ -----
-
--------------- -
----------------- --------
------ -----
-
--------
---- ----------------
--- ------------------ -----------
-- ------------------- -- -- ------ ------------
------- -----------------------
------
-----------
--------
----- --------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------------------
---------------------------------------------------------
-
-
------------------------------------------------- ---------------- - -------- ----- ---
---------在上面的示例代码中，我们使用了 ::part 字段来选择 Custom Elements 的内部部件。我们为 h1 标题和 p 元素的不同样式，都通过 ::part 选择器来区分。同样，我们也使用了 ::theme 字段来设置 Custom Elements 不同部分的主题样式，本样例中的主题是一个 button 按钮。
总结
Custom Elements 对于 Web 开发来说非常重要，但是由于缺乏内建的样式隔离机制，多个 Custom Elements 在同一个页面上使用时容易互相影响。为了解决这个问题，我们可以使用 Shadow DOM、::part 和 ::theme 等技术来实现样式隔离。这些技术可以帮助我们更轻松地定制 Custom Elements，提高代码的可维护性和吸引力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480b7e248841e9894038de6