前言
在 Web 前端开发中，我们经常需要构建可复用的组件以提高代码复用性和可维护性。然而，在某些情况下，组件的样式可能会受到其他组件或全局样式的影响而出现问题。为了解决这个问题，我们可以使用 Custom Elements 和 Shadow DOM 技术来构建抵御外部样式的 Web 组件。
Custom Elements
Custom Elements 是 Web 组件化的一项重要标准，它允许我们定义自己的 HTML 元素，从而创建可复用的组件。通过 Custom Elements，我们可以将组件的逻辑和样式封装到一个自定义的元素中，并在应用中重复使用。这样，我们就可以轻松管理和维护各种不同的组件。
定义 Custom Elements
定义 Custom Elements 很简单，只需要使用 class 和 customElements.define 方法即可。以下是一个简单的 Custom Elements 定义示例：
-- -------------------- ---- -------
--------- --------------------------
-------
-- -------- --
--------
-------
------ ----------------
-------------
--------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------
----- ---- - ---------------------------------
------------------- ----- ------ ---------------------
-
-
------------------------------------ ------------
---------以上代码定义了一个名为 my-checkbox 的 Custom Elements，它使用了一个模板 (<template>) 来定义组件的 HTML 结构和样式。在 MyCheckbox 类的构造函数中，我们获取模板 (const template = document.querySelector('#my-checkbox-template');)，然后使用 content.cloneNode 方法复制模板中的内容，并将其作为 Shadow DOM 的子节点 (this.attachShadow({mode: 'open'}).appendChild(node);)。最后，使用 customElements.define 方法将自定义元素注册到文档中。
使用 Custom Elements
使用 Custom Elements 很简单，只需要将自定义元素添加到 HTML 中即可。以下是一个简单的使用 Custom Elements 的示例：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ------- ------ --------------------------- ------- ------------------------------ ------- -------
以上代码中，我们将定义好的 my-checkbox 组件添加到 HTML 中，然后使用 script 标签引入组件的 JavaScript 文件。
Shadow DOM
Shadow DOM 是 Web 组件化的另一个重要标准，它允许我们创建有私有 DOM 和样式的组件。通过 Shadow DOM，我们可以将组件的样式和结构完全隔离开来，避免组件之间的样式污染和结构冲突。
创建 Shadow DOM
要创建 Shadow DOM，我们只需要调用 Element.attachShadow 方法即可。以下是一个简单的创建 Shadow DOM 的示例：
const element = document.createElement('div');
const shadow = element.attachShadow({mode: 'open'});以上代码中，我们首先创建一个普通的 HTML 元素 (const element = document.createElement('div');)，然后通过 attachShadow 方法为该元素创建一个 Shadow DOM (const shadow = element.attachShadow({mode: 'open'});)。
封装样式和结构
使用 Shadow DOM，我们可以将组件的样式和结构完全隔离开来，避免造成全局样式冲突和组件样式污染。以下是一个使用 Shadow DOM 封装样式和结构的示例：
-- -------------------- ---- -------
--------- ---------------------------
-------
-- ---- --
--------
---- ------------------
---- ---- ---
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------------
----- ------ - ------------------------ ---------
----- ---- - ---------------------------------
-------------------------
-
-
------------------------------------- -------------
---------以上代码中，我们使用 <template> 元素定义了组件的样式和结构，然后在 MyComponent 类的构造函数中，使用 document.querySelector 方法获取模板，然后使用 content.cloneNode 复制模板中的内容。接着，我们通过 this.attachShadow({mode: 'open'}) 方法为组件创建一个 Shadow DOM，并将复制的内容作为 Shadow DOM 的子节点 (shadow.appendChild(node);)。最后，我们使用 customElements.define 将自定义元素注册到文档中。
抵御外部样式
使用 Custom Elements 和 Shadow DOM 技术，我们可以构建抵御外部样式的 Web 组件。如果我们的组件需要抵御外部样式，可以考虑通过以下几种方式实现：
使用 Scoped CSS
Scoped CSS 是一种将 CSS 样式局限于组件内部的方式，它可以防止组件的样式受到外部组件或全局样式的影响。以下是一个使用 Scoped CSS 的示例：
-- -------------------- ---- -------
--------- ---------------------------
-------
----- -
-------- ------
-
---------- -
------- --- ----- ------
-
--------
---- ------------------
---- ---- ---
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------------
----- ------ - ------------------------ ---------
----- ---- - ---------------------------------
-------------------------
-
-
------------------------------------- -------------
---------以上代码中，我们使用 :host 选择器将样式限制在组件自身上。这样，即使外部存在类似的 .container 样式，也不会影响到组件。
使用 Shadow Parts
Shadow Parts 是一种直接将样式应用到 Shadow DOM 内部元素的方式，它可以避免组件内部元素的样式污染。以下是一个使用 Shadow Parts 的示例：
-- -------------------- ---- -------
--------- ---------------------------
-------
------------- -
-------- ------
-
------------------------------ -
------- --- ----- ------
-
--------
---- -------------------- -----------------
---- ---- ---
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------------
----- ------ - ------------------------ ---------
----- ---- - ---------------------------------
-------------------------
-
-
------------------------------------- -------------
---------以上代码中，我们使用 part 属性直接将样式应用到 Shadow DOM 内部元素上。这样，即使外部存在类似的 .my-component 样式，也不会影响到组件。
总结
通过 Custom Elements 和 Shadow DOM 技术，我们可以构建抵御外部样式的 Web 组件。使用 Scoped CSS 和 Shadow Parts 技术可以让我们更好的管理和维护组件的样式，避免组件之间的样式污染和结构冲突。希望本文能对广大 Web 前端开发者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64799f38968c7c53b059b46c