在现代化的 web 开发中， Custom Elements 是一种非常重要的技术，它可以让我们自定义 HTML 元素，让我们创造出更灵活、更强大的 web 应用。而 Shadow DOM ，则是 Custom Elements 的一个重要特性，它可以帮助我们更好地去封装元素的样式与行为，保证元素的稳定性和可复用性。本文将详细讲解 Shadow DOM 的作用和用法。
Shadow DOM 是什么？
Shadow DOM 是一种将 HTML 元素的样式和行为封装在一起的技术，它使用浏览器的原生 Shadow DOM 模块来实现。通过 Shadow DOM，我们可以将一个自定义的 HTML 元素封装在一个更小的作用域内，从而保证元素的样式和行为不会被外部的样式所影响。此外，Shadow DOM 还可以使我们更好地对元素的样式和行为进行管理，使得我们可以更方便地对元素进行维护和扩展。
Shadow DOM 的作用
封装样式和行为
Shadow DOM 可以将一个自定义的 HTML 元素封装在自己的 DOM 环境中，从而保证外部的样式和行为不会影响该元素。这种封装的方式，使得元素在不同的 web 页面中具有相同的表现，从而增加了元素的可重用性和可维护性。
防止样式污染
在传统的 web 开发中，我们常常会遇到样式污染的问题，即外部的样式会影响到元素的样式。这种问题在大型项目中尤为突出，因为当样式冲突时，我们很难追踪到原因。而使用 Shadow DOM 可以很好地解决这个问题，因为 Shadow DOM 中的样式只会影响到自己的 DOM 环境，不会影响到外部的 DOM。
更好的扩展性
在传统的 web 开发中，我们经常会把很多相同的代码重复写多次，这样不仅浪费了时间，也不便于以后的维护。而使用 Shadow DOM，我们可以将一些常用的功能封装在自定义元素中，从而提高了代码的复用性和可维护性。
Shadow DOM 的用法
创建 Shadow DOM
要创建 Shadow DOM，我们可以使用 Custom Elements API 中的 attachShadow() 方法，并传入一个包含 mode 属性的配置对象。其中，mode 属性共有三种取值:
open：表示 Shadow DOM 中的内容可以被外部的 JavaScript 访问到。closed：表示 Shadow DOM 内容无法被外部访问。null：表示浏览器将自动根据元素的使用场景来确定mode属性的值。
下面是一个简单的创建 Shadow DOM 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------ --- ------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- -----
----- - - ----------------------------
------------- - ------- --------
--------------------------
-
-
------------------------------------------ -----------
---------
-------
-------在上面的代码中，我们创建了一个名为 my-element 的自定义元素，并且在它的构造函数中使用了 attachShadow() 方法创建了一个 Shadow DOM 环境，然后往其中添加了一个 p 元素。最后，我们将 my-element 元素注册到了 customElements 中。
Slot 插槽
在 Shadow DOM 中，插槽是一种非常有用的概念。它可以帮助我们更好地控制元素的布局，并实现组件的复用。插槽是一种特殊的 HTML 标签，它可以将 Shadow DOM 中的内容嵌入到自定义元素外面。
下面是一个简单的使用插槽的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
------------
-- --------------------- ----------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- -----
----- -------- - -----------------------------------
------------------ - -
-------
---------- -
-------- -----
------- --- ----- -----
-
--------
---- ------------------
----- ----------------------
------
--
---------------------------------------------------------
-
-
------------------------------------------ -----------
---------
-------
-------在上面的代码中，我们创建了一个名为 my-element 的自定义元素，并在其中定义了一个名为 content 的插槽。然后，我们使用 template 元素创建了一个 Shadow DOM，并在其中定义了一个 div 元素作为容器，容器的内容就是 content 插槽中的内容。
路由链接
在实际开发中，我们经常会使用路由链接来实现页面导航。在 Shadow DOM 中，我们也可以使用路由链接来实现类似的功能。要实现这个功能，只需要在 Shadow DOM 中使用 a 标签来创建路由链接，并在其 href 属性中指定要跳转的地址即可。
下面是一个简单的路由链接示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
-----------------
--------
----- ----- ------- ----------- -
------------- -
--------
-- -- ------ ---
----- ---------- - ------------------- ----- ------ ---
-- - ------ --- -----
----- -- - -----------------------------
------------ - -
------ ---------------------
------ ----------------------------
------ ------------------------------
--
---------------------------
-- ------
------------------------------------- -- -- -
---------------------------
---
-
-
-------------------------------------- -------
---------
-------
-------在上面的代码中，我们创建了一个名为 my-app 的自定义元素，并在其中使用路由链接来实现页面导航。同时，我们还监听了路由的变化，并在控制台中打印出了当前的路由地址。
总结
Shadow DOM 是 Custom Elements 中一个非常重要的特性，它可以将 HTML 元素的样式和行为封装在一起，从而保证元素的稳定性和可复用性。通过本文的讲解，相信大家已经对 Shadow DOM 有了一个清晰的认识，并能够熟练地运用它来提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b121f968c7c53b0d6edc0