在前端开发中，组件化是一个非常重要的概念。它允许我们将页面分解成更小的部分，以便更好地管理它们，重复使用它们，并使代码更易于维护。而 Shadow DOM 和 Custom Elements 是两项与组件化相关的技术，它们可以帮助我们构建可隔离的 Web 组件。
Shadow DOM
Shadom DOM 是一种让 DOM 节点树与其占用的 CSS 和 JavaScript 代码隔离开来的技术，它允许您创建封装和隔离的 web 组件。DOM 节点树存在于一个独立和隔离的文档片段中，而不是页面的主 DOM 上下文中。这使得组件中的样式和脚本可以在不影响页面其他部分的情况下自我管理。简单来说，Shadow DOM 允许您创建具有自己专用 DOM 的独立组件。
下面的代码演示如何使用 Shadow DOM：
-- -------------------- ---- -------
--------- ---------------------------
-------
- -
------ ----
-
--------
-------- ----------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -------------------------------------------------
----- ------- - ---------------------------------
--------------------------------
-
-
-------------------------------------------- -------------
---------
-----------------------------在上面的代码中，我们定义了一个模板，模板包含了一些 CSS 样式和 HTML 内容。然后，在我们的自定义元素中创建一个 Shadow DOM，引用模板并将其内容复制到 Shadow DOM 中。
使用 attachShadow 方法创建一个 Shadow DOM。attachShadow 方法接收一个 mode 参数，该参数指定 Shadow DOM 是打开还是关闭。如果 mode 参数为 open，则其他脚本可以通过该组件的 shadowRoot 属性访问 Shadow DOM。如果 mode 参数为 closed，则其他脚本将无法访问该组件的 Shadow DOM。
之后，我们通过调用 window.customElements.define() 方法来定义我们的自定义元素。最后，在页面中使用 <my-component> 元素即可。
Custom Elements
Custom Elements 是 Web Components API 的一部分，它允许您创建自定义 HTML 元素并指定其行为。使用 Custom Elements，我们可以将组件封装到自定义元素中。自定义元素可以看作是一种特殊的 HTML 元素，它们可以包含 Shadow DOM，动态更新和响应事件。
下面的代码演示如何使用 Custom Elements：
-- -------------------- ---- -------
--------- ---------------------------
-------
- -
------ ----
-
--------
-------- ----------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -------------------------------------------------
----- ------- - ---------------------------------
--------------------------------
-
-
-------------------------------------------- -------------
---------
-----------------------------在代码中，我们也可以处理多种自定义元素的事件。例如，在 connectedCallback 方法中初始化，disconnectedCallback 方法中清理。还有 attributeChangedCallback 方法，该方法在元素属性发生更改时被调用。
除了 Custom Elements 和 Shadow DOM，Web Components API 还包括 HTML Templates 和 HTML Imports。这些技术组成了一整套组件化工具。
总结
使用 Shadow DOM 和 Custom Elements 构建可隔离的 Web 组件是一种强大的组件化方案。使用这些技术发现组件的许多好处：它们是可组合的，易于重用，易于维护，并且具有良好的封装性。我们可以尝试使用上述的代码实例，感受一下 Web 组件的力量！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476bb54968c7c53b03623ab