Web Components 是一种基于 Web 平台的组件化技术，它允许开发者将功能和样式封装在自定义标签中，然后通过该标签在不同应用程序中重复使用。它的原理是通过将页面的功能拆分为单个组件，提高代码的组织性和可维护性，同时增强应用的可重用性。本文将为您介绍 Web Component 的核心概念及其示例代码，以帮助您开始使用 Web Components 技术。
核心概念
自定义元素
自定义元素是 Web Components 最重要的组成部分。通过自定义元素能够创建自定义标签，这些标签可以包含自定义的行为和样式。自定义元素基于 HTML 的元素是构建的，以 customElement 函数来定义。以下是如何创建一个简单的自定义元素：
----- ------------ ------- ----------- -
------------------- -
---------------- - ------- --------
-
-
-------------------------------------- --------------在此代码中，我们定义了一个名为 HelloMessage 的 JavaScript 类，该类继承自 HTMLElement。该类的 connectedCallback 方法在自定义元素被添加到 DOM 中时会自动调用。此方法设置了元素的文本内容为 “Hello，World！”。最后，我们使用 customElements.define 方法将自定义元素注册到系统中。
这里定义的自定义元素可以通过 HTML 的 hello-message 标签来使用和查询。
影子 DOM
影子 DOM（Shadow DOM）是一种模拟原生的封装 DOM 结构的技术。它允许组件使用其自己的 HTML、CSS 和 JavaScript，同时与其他元素的样式和功能分离。这样就可以使组件更加隔离和可维护。以下是使用影子 DOM 创建自定义元素的示例代码：
----- ----- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - -
-------
-- ---------- --
--------
----
------------
------------
------------
-----
--
-
-
------------------------------- -------此代码创建了一个名为 MyTab 的自定义元素，并使用 attachShadow 方法在元素内部创建影子 DOM。影子 DOM 可以在形式上类似于普通 DOM，并使用与 Web Components 相关的 API 进行操纵。在这里，我们定义了一个包括选项卡标签的列表，并在样式部分集中编写了 CSS 样式。
与之前的示例相比，我们使用 this.shadowRoot 属性代替了 this 引用，并在其中插入了 HTML、CSS 列表。Web 组件使用影子 DOM 和自定义元素结合，实现了彼此独立的生命周期，从而实现了高度重用性。
HTML 模板
HTML 模板是 Web Components 一种可重用的 HTML 内容。在使用 Web Components 构建应用程序时，当我们需要使用相同内容的 HTML 片段时，HTML 模板就显得格外重要。以下是如何在 Web 组件中使用 HTML 模板：
----- -------- - -----------------------------------
------------------ - -
-------
-- ----- --
--------
-----
-------------
---------------------
------
--
----- ----------- ------- ----------- -
------------- -
--------
------------------------ -------------------------------------------------------
-
-
------------------------------------- -------------此代码使用 document.createElement 方法创建一个 HTML 模板。在此示例中，我们使用了带有样式和一些标记的 HTML 标记。此模板必须克隆并插入到 Web 组件中。对于克隆模板，我们使用 appendChild 方法并调用 cloneNode 函数生成深层副本。
好处是，当每次使用组件时，模板内容不会随动态内容的变化而更改。
示例
点击拷贝
下面是一个将组件封装在 HTML 标记内的示例。此组件在单击标记时将其文本内容复制到剪贴板中。这是一个功能强大而有用的组件，可以节省大量的手动拷贝和粘贴时间。
----- ------------ ------- ----------- -
------------- -
--------
-
------------------- -
----- ------ - -- -- -
----- ---- - -----------------
----- ----- - --------------------------------
---------------------------------
----------- - -----
---------------
-----------------------------
---------------------------------
-
------------------------------ --------
-
-
-------------------------------------- --------------这个组件非常简单。我们添加一个 clicked 事件监听器，当标记元素被单击时会调用此事件处理器。该处理器复制标签的文本内容并将其添加到剪贴板中。
在 HTML 文件中，只需要定义 copyable-text 元素，输入相应的文本内容，便可创建此组件。
--------------- ---------------- ----------------
登录组件
下面是一个登录组件示例。该组件包括电子邮件和密码输入框、一个可选的 “记住我” 复选框、以及提交按钮，用于验证用户的凭据。
----- -------- - -----------------------------------
------------------ - -
-------
-- ----- --
--------
-----
-------------------
------ -------------
-----------------
------ ----------------
-------
---
------ ----------------
--------
------- -------------------------
------
--
----- -------- ------- ----------- -
------------- -
--------
------------------------ -------------------------------------------------------
-
------------------- -
----- ---- - -------------------------------------
------------------------------- - -- -
-------------------
----- ----- - ---------------------------------------------------------
----- -------- - ------------------------------------------------------------
----- ---------- - --------------------------------------------------------------
-- -------------
------------------------ --------- --------- ------------ -------- --- -----------------
---
-
-
---------------------------------- ----------这个组件包括一个包含电子邮件、密码和选项的表单，并在提交时调用一个事件处理程序来处理表单的数据。我们也可以在 CSS 样式部分为此组件添加样式，使其看起来更加美观。在页面中以此创建组件：
-----------------------
结论
Web Components 是一种支持内置模块化和可组合性的 Web 技术。它的主要目标是提高代码的组织性和可维护性，并促进 Web 应用程序的可重用性。本文重点介绍了 Web Components 的核心概念，包括自定义元素、影子 DOM 和 HTML 模板，并提供了示例代码。如果您想学习 Web 组件开发的基础知识，那么本文将为您提供一个很好的起点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6709ecd0d91dce0dc87d0ee0