Web Components 是一种构建可复用组件的技术，它包括四个主要的规范：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。其中，Shadow DOM 是 Web Components 的重要组成部分，它提供了一种隔离组件样式和行为的机制。本文将介绍 Shadow DOM 的使用方法，帮助读者更好地理解 Web Components 技术。
Shadow DOM 简介
Shadow DOM 是一种将 DOM 树分割成多个隔离的 DOM 树的技术。它可以将一个组件的样式和行为封装在一个 Shadow DOM 中，从而避免组件之间的样式冲突和行为干扰。Shadow DOM 中的元素可以通过 JavaScript 访问和操作，但在外部 DOM 中不可见。
Shadow DOM 的使用
要使用 Shadow DOM，我们需要使用 HTML 的 <template> 元素来定义 Shadow DOM 的内容。例如，下面的代码定义了一个包含一个 <h1> 元素的 Shadow DOM：
<template id="my-component">
<style>
h1 {
color: red;
}
</style>
<h1>Hello, World!</h1>
</template>接下来，我们需要使用 JavaScript 将 Shadow DOM 添加到一个元素中。这可以通过 attachShadow() 方法来实现。例如，下面的代码将上面定义的 Shadow DOM 添加到一个 <div> 元素中：
const div = document.createElement('div');
const template = document.getElementById('my-component');
const shadowRoot = div.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));上面的代码中，attachShadow() 方法的参数 mode 可以是 'open' 或 'closed'。当 mode 为 'open' 时，外部 DOM 可以通过 shadowRoot 属性来访问 Shadow DOM 中的元素；当 mode 为 'closed' 时，外部 DOM 无法访问 Shadow DOM 中的元素。
Shadow DOM 的样式隔离
Shadow DOM 的一个重要特性是样式隔离。在 Shadow DOM 中定义的样式仅适用于 Shadow DOM 内部，不会影响外部 DOM 中的元素。例如，下面的代码定义了一个包含一个红色标题的 Shadow DOM：
<template id="my-component">
<style>
h1 {
color: red;
}
</style>
<h1>Hello, World!</h1>
</template>如果我们将这个 Shadow DOM 添加到一个 <div> 元素中，并在外部 DOM 中定义一个蓝色标题的样式，会发现蓝色样式不会影响 Shadow DOM 中的标题：
-- -------------------- ---- -------
-------
-- -
------ -----
-
--------
---- ---------------------
--------
----- --- - -------------------------------------
----- -------- - ----------------------------------------
----- ---------- - ------------------ ----- ------ ---
---------------------------------------------------------
---------Shadow DOM 的事件处理
在 Shadow DOM 中，事件处理也是被隔离的。例如，如果在 Shadow DOM 中定义了一个按钮，并给它添加了一个点击事件处理程序，那么该事件处理程序只会在 Shadow DOM 内部触发，不会影响外部 DOM 中的其他元素。例如，下面的代码定义了一个包含一个按钮的 Shadow DOM：
-- -------------------- ---- -------
--------- ------------------
-------
------ -
----------------- -----
------ ------
-
--------
------------- -----------
-----------如果我们将这个 Shadow DOM 添加到一个 <div> 元素中，并在外部 DOM 中定义一个按钮的点击事件处理程序，会发现该处理程序不会被触发：
-- -------------------- ---- -------
---- ---------------------
--------
----- --- - -------------------------------------
----- -------- - ----------------------------------------
----- ---------- - ------------------ ----- ------ ---
---------------------------------------------------------
----- ------ - -----------------------------------
-------------------------------- -- -- -
------------------- ----------
---
---------总结
Shadow DOM 是 Web Components 技术的重要组成部分，它提供了一种隔离组件样式和行为的机制。在使用 Shadow DOM 时，我们需要定义一个包含组件样式和行为的 <template> 元素，并使用 JavaScript 将它添加到一个元素的 Shadow DOM 中。Shadow DOM 的样式和事件处理是被隔离的，不会影响外部 DOM 中的其他元素。通过学习和使用 Shadow DOM，我们可以更好地构建可复用的 Web Components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cd545badd4f0e0ff695a30