Web Components 是一种建立可重复使用的定制元素的方法，允许开发人员自定义 HTML 标记并创建可嵌入到其它页面中的组件。其中 Shadow DOM 是 Web Components 的核心概念之一，它可以帮助我们创建隔离的 DOM 树和 CSS 样式。在本文中，我们将介绍 Shadow DOM 的基础知识。
Shadow DOM 是什么
Shadow DOM 是一种将一个 DOM 树隐藏在另一个 DOM 树之后的技术。在 Shadow DOM 中，我们可以定义 HTML 元素的内部结构、样式和行为。这些定义被限制在 Shadow DOM 中，不会对外部 DOM 产生影响，从而实现了真正的隔离。
具体来说，Shadow DOM 中的节点可以使用 shadowRoot 属性来访问。对于外部 DOM 中的节点，可以使用 attachShadow 方法来将 Shadow DOM 连接到元素上。例如，下面是一个创建 Shadow DOM 的示例代码：
-- -------------------- ---- ------- --------- ---------- ------- -- ------ --- ---- -- ----- - -------- ------ ------- --- ----- ----- -------- ----- - -------- ---- ------ --- ---- --- --------- ------ -------- ----------- ---- --------------------- -------- ----- ---- - -------------------------------- ----- ---------- - --------------------------------------------------- ----- ------ --- ----------------------------------------------------- ---------展开代码
上面的代码中，我们首先定义了一个 template 元素来表示 Shadow DOM 的结构和样式，然后使用 attachShadow 方法将 Shadow DOM 连接到 div#container 元素上，并将 template 元素的内容复制添加到 Shadow DOM 中。
注意到 attachShadow 方法的第一个参数 { mode: 'open' }，这个参数表示 Shadow DOM 是开启的，允许外部 DOM 访问。还有 :host 选择器，它用来表示 Shadow DOM 对应元素的样式。
Shadow DOM 中的样式
Shadow DOM 不仅隔离了 DOM 树，还可以隔离 CSS 样式。这种隔离也使得 Shadow DOM 更加灵活和可定制。例如，我们可以在 Shadow DOM 中定义独立的样式，而不用担心和外部样式冲突。下面是一个示例代码：
-- -------------------- ---- ------- --------- ---------- ---- ------ --- ---- --- ------- ------ - ---------- ----- ------ ----- - -------- ---- ------ --- ---- --- --- -------------------- ------ --------- ----------- ---- --------------------- -------- ----- ---- - -------------------------------- ----- ---------- - --------------------------------------------------- ----- ------ --- ----------------------------------------------------- ---------展开代码
上面的代码中，我们在 Shadow DOM 中定义了 .title 类样式，并为 h1 元素指定了这个样式。在外部 DOM 中，我们可以使用 :host 选择器来控制 Shadow DOM 对应元素的样式，例如：
:host { display: block; border: 1px solid gray; padding: 10px; }
这段样式代码将控制 Shadow DOM 对应元素的边框、内边距等样式。
Shadow DOM 中的插槽
插槽（Slot）是 Shadow DOM 中另一个重要的概念。它可以让我们将一些子元素插入到 Shadow DOM 中，从而实现更多的定制需求。例如，下面是一个实现了插槽的示例代码：
-- -------------------- ---- ------- --------- ---------- ------- -- ------ --- ---- -- ----- - -------- ------ ------- --- ----- ----- -------- ----- - -------- ---- ------ --- ---- --- ----- -------------------- ------------- ----------- ---- --------------- ---- -- --- ---- --- --- ------------------ ------ --------- -------- ----- ----- --- ----- ----------- ---------- --------- ------ -------- ----- ---- - -------------------------------- ----- ---------- - --------------------------------------------------- ----- ------ --- ----------------------------------------------------- ---------展开代码
上面的代码中，在 Shadow DOM 中我们使用了两个 slot 元素，其中一个带有 name="title" 属性，表示这是一个具名插槽，可以被外部 DOM 中的 h1 元素所匹配。另一个没有 name 属性，表示这是一个默认插槽，可以匹配外部 DOM 中的其他子元素。
在外部 DOM 中，我们在容器元素中插入了一个 h1 元素和一个 p 元素。其中 h1 元素中的 slot 属性值和 Shadow DOM 中的插槽名称相同。这样，插槽中的内容就会被替换成外部的 h1 元素，而默认插槽中的内容则会被替换成外部的 p 元素。
总结
Shadow DOM 是 Web Components 的关键技术之一，它可以帮助我们实现真正的 DOM 和样式隔离。本文介绍了 Shadow DOM 的基本用法和几个关键概念（例如 shadowRoot、.host、slot 等），同时给出了一些示例代码，希望可以帮助读者更好地理解这个技术并用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c142b968c7c53b0e58674
