Web 组件是前端开发的必备技术之一，它们允许您创建可重用、可扩展和易于维护的 UI 组件。Custom Elements 和 Shadow DOM 是 Web 组件规范的核心技术，本文将探讨如何使用它们从头构建 Web 组件。
Custom Elements
Custom Elements 是一个 Web 组件规范中的一部分，它允许您以类似于原生 HTML 元素的方式创建自定义元素。Custom Elements 可以添加自定义行为、属性和方法，从而使 Web 开发更加灵活和可扩展。
创建 Custom Element
要创建 Custom Element，您需要使用 CustomElementRegistry 中的 define() 方法。下面是一个使用 Custom Elements 创建的简单的 hello-world 组件。
-- -------------------- ---- -------
--------- --------------------------
------------ -------------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
-
-
------------------------------------ ------------
---------
---------------------------在上面的代码中，我们定义了一个名为 HelloWorld 的 Custom Element。该元素的 constructor 方法负责添加 Shadow DOM，并将组件的模板插入其中。最后，我们使用 customElements.define() 方法将 HelloWorld 注册为 hello-world。
自定义属性
为了让我们的 Web 组件更加灵活，我们可以添加自定义属性。当属性的值更改时，我们可以在我们的组件的生命周期内更新组件的状态。
-- -------------------- ---- -------
--------- ----------------------
------------ ----- -------------------------
------- -------------------------
-----------
--------
----- ------- ------- ----------- -
------------- -
--------
----- -------- - --------------------------------------------
--------------- - ------------------- ----- ------ ---
--------------------------------------------------------------
----------- - --
---------------
-
--- ------- -
------ ------------
-
--- ------------ -
----------- - ------
---------------
-
------------------- -
-------------------------------------------
-------------------------- -- -- --------------
-
--------- -
------------------------------------------------- - ------------
-
-
---------------------------------- ---------
---------
---------- -----------------------在上面的代码中，我们添加了一个名为 count 的自定义属性。我们还添加了一个 _render() 方法，该方法在 count 属性更改时更新组件的 DOM。
注意，在 connectedCallback() 方法中，我们添加了一个事件监听器，该监听器在点击按钮时增加 count 属性的值。
生命周期方法
Custom Elements 还提供了一些生命周期方法，让您能够通过代码来控制您的组件。下面是一些常用的方法：
constructor(): 在元素首次生成时被调用。connectedCallback(): 当元素被插入到文档中时被调用。disconnectedCallback(): 当元素从文档中被移除时被调用。attributeChangedCallback(name, oldValue, newValue): 当元素的属性更改时被调用。
Shadow DOM
Shadow DOM 是一种将元素与封闭的 DOM 子树关联起来的方法。Shadow DOM 提供了封装和样式隔离，从而使您的组件更加可维护和可重用。
创建 Shadow DOM
要创建 Shadow DOM，您需要使用 attachShadow() 方法。下面是一个示例：
-- -------------------- ---- -------
--------- --------------------------
-------
----- -
------------ -----
------ -----
-
--------
------------ -------------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------
--------------- - ------------------- ----- ------ ---
--------------------------------------------------------------
-
-
------------------------------------ ------------
---------
---------------------------在上面的示例中，我们使用 :host 选择器在 Shadow DOM 中定义了样式。此外，我们还将元素的模板插入了 Shadow DOM 中。
样式隔离
Shadow DOM 提供了样式隔离的功能，使得您的组件的样式不会影响到其它组件。
<hello-world></hello-world>
<style>
hello-world {
font-size: 24px;
text-transform: capitalize;
}
</style>在上面的示例中，我们将 hello-world 组件包含在 style 标签中。由于 Shadow DOM 的存在，hello-world 组件的样式不会影响到全局样式。
插槽
插槽是 Shadow DOM 中的一种特殊元素，可以将父元素中的内容插入到 Shadow DOM 中。这使得您能够更灵活地控制组件的输出。
-- -------------------- ---- -------
--------- ----------------------
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
-
-- -
----------- --
-
--------
--------- -------------------------
-------- -----------------------
-----------
-------------------
-- -------------------- -- -- -----------
-- -------------- ---- -- ---- --- --- - -- - --------------
--------------------在上面的示例中，我们定义了一个名为 profile-component 的组件，并使用插槽将 <p> 元素插入到 Shadow DOM 中。插槽的名称由 name 属性指定。
总结
Custom Elements 和 Shadow DOM 是现代 Web 开发中不可或缺的技术。它们使得构建可重用、可扩展和易于维护的组件成为可能。在本文中，我们探讨了如何使用这些技术从头构建 Web 组件，并提供了一些示例代码供您参考。希望这篇文章能够让您更好地理解 Web 组件的工作原理，并在您的项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475ab34968c7c53b02ae222