前言
Web Components 是一种用于构建可重用的组件化 Web 应用程序的技术。它由 Custom Elements、Shadow DOM 和 HTML Templates 三个技术规范组成。
其中，Shadow DOM 是 Web Components 技术中非常重要的一部分，它允许开发者创建封装的组件，使得组件的样式和逻辑不会影响到其他组件或页面元素。本文将介绍 Shadow DOM 的相关知识，并提供一些实践案例，帮助读者更好地理解和应用 Shadow DOM。
Shadow DOM 是什么？
Shadow DOM 是一种 DOM 封装技术，它允许开发者将一个 DOM 子树隐藏在一个组件的内部，并且不会影响到外部的其他元素。这个隐藏的 DOM 子树称为 Shadow DOM 树。
Shadow DOM 树中的元素可以被组件内部的 JavaScript 访问，但是外部的 JavaScript 无法访问。同时，Shadow DOM 树中的样式只会应用到组件内部的元素，不会影响到外部元素。
Shadow DOM 的使用
创建 Shadow DOM
要创建一个 Shadow DOM，需要使用 Element 的 attachShadow() 方法。这个方法会创建一个 Shadow DOM 树，并返回 ShadowRoot 对象，我们可以通过这个对象来操作 Shadow DOM 树中的元素。
<div id="my-component"></div>
<script>
const myComponent = document.querySelector('#my-component');
const shadowRoot = myComponent.attachShadow({ mode: 'open' });
</script>在上面的代码中，我们首先获取了一个 id 为 my-component 的元素，然后调用了它的 attachShadow() 方法来创建 Shadow DOM。mode: 'open' 表示 Shadow DOM 是开放的，外部 JavaScript 可以访问到 ShadowRoot 对象。
添加元素到 Shadow DOM
创建了 Shadow DOM 之后，我们需要向其中添加元素。可以通过 ShadowRoot 对象的 appendChild() 方法来添加元素。
-- -------------------- ---- ------- ---- ------------------------ -------- ----- ----------- - ---------------------------------------- ----- ---------- - -------------------------- ----- ------ --- ----- -- - ----------------------------- -------------- - ------- ------ ------ --------------------------- ---------
在上面的代码中，我们创建了一个 h1 元素，并将其添加到了 Shadow DOM 中。
样式隔离
Shadow DOM 的一个重要特性是样式隔离。也就是说，Shadow DOM 中的样式只会影响到 Shadow DOM 内部的元素，不会影响到外部元素。
-- -------------------- ---- -------
---- ------------------
---------- -----------
------
--------
----- ----------- - ----------------------------------------
----- ---------- - -------------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
-- -
------ ----
-
--
------------------------------
---------在上面的代码中，我们给 h1 元素添加了一个红色的颜色样式。但是这个样式只会应用到 Shadow DOM 内部的 h1 元素，不会影响到外部的 h1 元素。
封装组件
Shadow DOM 还可以用于封装组件，使得组件的样式和逻辑不会影响到其他组件或页面元素。
-- -------------------- ---- -------
---- ------------------
---------- -----------
------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -- - -----------------------------
-------------- - ------- ------ ------
---------------------------
----- ----- - --------------------------------
----------------- - -
-- -
------ ----
-
--
------------------------------
-
-
------------------------------------- -------------
---------在上面的代码中，我们定义了一个名为 MyComponent 的组件，并将其注册为 my-component 自定义元素。在组件的构造函数中，我们创建了一个 Shadow DOM，并向其中添加了一个 h1 元素和一个样式。
总结
Shadow DOM 是 Web Components 技术中非常重要的一部分。它允许开发者创建封装的组件，使得组件的样式和逻辑不会影响到其他组件或页面元素。本文介绍了 Shadow DOM 的相关知识，并提供了一些实践案例，帮助读者更好地理解和应用 Shadow DOM。如果你正在开发 Web Components，那么 Shadow DOM 绝对是你不可忽略的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6635a26dd3423812e4328ac7