在前端开发中，我们经常需要创建自定义元素，以便在页面中重复使用。而随着 Web Components 技术的发展，我们还可以通过创建 Shadow DOM 和自定义元素来实现更加灵活的页面构建。本文将介绍如何创建 Shadow DOM 和自定义元素，并提供一些技巧和示例代码。
什么是 Shadow DOM？
Shadow DOM 是 Web Components 技术中的一部分，它允许我们创建一个独立的 DOM 树，与页面中的主 DOM 树相互独立。这意味着我们可以在 Shadow DOM 中创建自定义元素和样式，而不会影响到页面中的其他元素和样式。
如何创建 Shadow DOM？
在使用 Shadow DOM 之前，我们需要先创建一个 Shadow Root。可以使用如下代码创建一个 Shadow Root：
const shadowRoot = element.attachShadow({ mode: 'open' });其中，element 是我们要创建 Shadow DOM 的元素。
mode 参数有两个可选值：open 和 closed。open 表示我们可以从外部访问 Shadow Root，而 closed 则表示只能在元素内部进行访问。
创建 Shadow Root 后，我们就可以在其中创建自定义元素和样式了。
创建自定义元素
要创建自定义元素，我们需要使用 customElements.define 方法。该方法接受两个参数：自定义元素的名称和一个类或对象，用于定义元素的行为和样式。
下面是一个简单的自定义元素示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ----------
--
-
-
----------------------------------- -----------在上面的示例中，我们定义了一个名为 my-element 的自定义元素，它继承自 HTMLElement。在元素的构造函数中，我们创建了一个 Shadow Root，并在其中定义了一个红色的段落元素。
要在页面中使用该自定义元素，只需要像使用普通元素一样使用它即可：
<my-element></my-element>
自定义元素的生命周期
自定义元素有一些特殊的生命周期回调函数，可以在元素的不同生命周期阶段执行一些操作。下面是自定义元素的生命周期回调函数：
connectedCallback：元素被插入到页面中时调用。disconnectedCallback：元素从页面中移除时调用。adoptedCallback：元素被移动到新的文档时调用。attributeChangedCallback：元素的属性值发生变化时调用。
下面是一个示例，展示了如何使用 connectedCallback 和 disconnectedCallback：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ----------
--
-
------------------- -
-------------------- ------------
-
---------------------- -
-------------------- ---------------
-
-
----------------------------------- -----------Shadow DOM 中的样式
在 Shadow DOM 中定义的样式仅适用于该 Shadow DOM 内部的元素。如果我们想要在 Shadow DOM 外部定义样式，可以使用 ::part 和 ::theme 伪类选择器。
::part 选择器可以用来选择 Shadow DOM 内部的自定义元素的某个部分。例如，我们可以使用如下代码定义一个名为 my-button 的自定义按钮元素，并在其中定义一个名为 label 的部分：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
----- -
-------- -------------
------- --- ----- ------
-------- ----
-
------------- -
------------ -----
-
--------
----- --------------------------
--
-
-
---------------------------------- ----------在上面的示例中，我们使用 ::part 选择器选择了名为 label 的部分，并将该部分的字体加粗。
要在 Shadow DOM 外部定义样式，可以使用 ::theme 伪类选择器。例如，我们可以使用如下代码定义一个名为 my-theme 的主题，并在其中定义一个名为 primary-color 的变量：
-- -------------------- ---- -------
----- -
---------------- -----
-
-- -- -------- -- --
------ ---------------------- ------ -
----- -
---------------- -----
-
-
------ ---------------------- ----- -
----- -
---------------- ----
-
-
-- - ------ --- ------- --
----- -
----------------- ---------------------
-在上面的示例中，我们使用 :root 定义了一个名为 --primary-color 的变量，并在 my-theme 主题中对该变量进行了定义。在 Shadow DOM 中，我们可以使用 var(--primary-color) 来引用该变量。
总结
本文介绍了如何创建 Shadow DOM 和自定义元素，并提供了一些技巧和示例代码。通过使用 Shadow DOM 和自定义元素，我们可以实现更加灵活的页面构建，并提高代码的可重用性和可维护性。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fec494d10417a2229fa9b1