Web Components 是 Web 技术的一种新思路，它可以让开发者创建可重用的自定义组件，这些组件可被多个应用程序重用并显著提升开发效率。其中一个关键特性是 Shadow DOM，它使得我们可以将样式和行为封装在一个独立的 DOM 树中。
如果你已经了解了什么是 Shadow DOM，那么你肯定也是渴望自定义 Shadow DOM 看起来的网页元素。本文将介绍如何定义一个自定义 Shadow DOM，以及如何在其中操作元素。
什么是自定义 Shadow DOM？
Shadow DOM 是一种分隔的 DOM 子树，与独立的主文档 DOM 相互独立。在屏幕上，它们在同一个视图中混合显示。自定义 Shadow DOM 指的是我们可以编写自己的 Shadow DOM，来自定义表现，行为或事件的子集。
指定 Shadow DOM 根的方法是使用 element.attachShadow() 方法。下面是定义一个自定义 Shadow DOM 的示例：
-- -------------------- ---- -------
--------- -----
------
------
-------
------
-----------------------
--------
---------------------------------- ----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
------ -
----------- ----
-
--------
--------
-------------
---------
--
-
---
---------
-------
-------在上面的示例中，定义了一个名为 my-button 的自定义元素，它的 Shadow DOM 中包含一个红色的按钮和一些默认的文本节点。由于定义了 slot 元素，所以使用 my-button 元素时，可以为它指定文本内容以及子元素。
如何操作 Shadow DOM 中的元素？
一旦你定义了自定义 Shadow DOM，你还可以使用以下方法来操纵它：
shadowRoot.querySelector()或shadowRoot.querySelectorAll()：搜索 Shadow DOM 中的元素。element.shadowRoot：获取当前元素的 Shadow DOM 对象。event.composedPath()：返回从事件目标到根的组成路径，它穿过 Shadow DOM 并沿着标准 DOM。
示例
对于上面的示例，假设我们想在点击按钮时弹出一个警告框。我们可以在构造函数中添加以下代码：
const buttonElement = shadowRoot.querySelector('button');
buttonElement.addEventListener('click', () => {
alert('You clicked the button!');
});此时，我们添加的事件依旧会通过浏览器事件处理机制传播，但在事件传播期间，直到事件达到 Shadow DOM 内的元素时，它不会穿过 Shadow DOM。如果要处理 Shadow DOM 中发起的事件，可以使用 event.composedPath()。
-- -------------------- ---- -------
--------------------------------------- ------- -- -
------------------------ -- ------
----- ---- - ---------------------
---------------------- -- -
-- ---------------- --- ------------ -
---------- ------- --- ------ ---- -------------
-
---
---上面的代码首先通过 event.stopPropagation() 阻止了事件传播。然后，使用 event.composedPath() 获取事件的传播路径，查找到 my-button 元素，并在其中弹出警告框。
总结
本文介绍了如何定义自己的 Shadow DOM 并操作其中的元素。自定义 Shadow DOM 可以让我们更好地封装组件和自定义元素。在实际开发中，我们可以根据应用程序的需求使用该特性创造更加强大的自定义元素和组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6e804f6b2d6eab3f749dd