Web Components 是一种用于构建可重用组件的 Web 平台 API。它允许你创建自定义元素，这些元素可以在应用程序中重复使用，并且不受 HTML、CSS 和 JavaScript 的影响。在此教程中，我们将讨论 Web Components 的基础知识，并构建一个简单的组件示例。
Web Components 的基础知识
Web Components 由四个主要技术组成：
- 自定义元素：允许您定义自己的 HTML 标签。例如，您可以定义一个
<my-element>标签，然后使用它在您的文档中创建自定义元素。 - 影子 DOM：允许您创建具有范围作用域的 CSS 和 DOM，以便您可以创建组件，而无需担心它们与其他元素的样式冲突。
- HTML 模板：允许您将标记分开，以便您可以在文档中重新使用它们。例如，您可以将组件样式与 HTML 组件分开，以便您可以在多个页面中重复使用样式。
- ES Modules：允许您将 JavaScript 文件作为模块加载，并导出其中的函数和其他内容以供其他脚本使用。
Web Components 可以在所有现代浏览器中使用，但需要使用 polyfill 或框架来支持旧版浏览器（如 IE）。
构建一个简单的组件
我们将创建一个简单的组件来展示 Web Components 的基础知识。该组件将是一个带有一些文本的自定义元素，它将使用模板和影子 DOM 来实现一些样式。
创建 HTML 模板
首先，我们需要在 HTML 文件中创建一个模板：
-- -------------------- ---- -------
--------- -----------------
-------
---------- -
------- --- ----- ------
-------- -----
---------- -----
-
--------
---- ------------------
-------------
------
-----------这个模板定义了一个 <div> 元素，它有一个叫做 container 的类，并包含一个 <slot> 元素。请注意，此模板包含 CSS 样式，而这些样式是在组件内部定义的，这意味着它们只适用于组件内部。<slot> 元素用于替换文本内容，并在组件实例中显示它。
创建自定义元素
接下来，我们需要创建一个自定义元素：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------
----- ------- - ---------------------------------
------------------- ----- ------ ------------------------
-
-
----------------------------------- -----------该代码定义了一个名为 MyElement 的类，该类继承自 HTMLElement。在构造函数中，我们使用 getElementById() 方法找到了我们之前创建的模板，并使用 cloneNode() 方法克隆了它。然后，我们使用 attachShadow() 方法创建一个影子 DOM 根，该方法返回一个 ShadowRoot 对象。最后，我们将克隆的模板附加到 ShadowRoot 对象中。
该组件还使用 customElements.define() 方法定义了一个名为 my-element 的自定义元素，该自定义元素将使用 MyElement 类定义。
在文档中使用组件
现在我们已经定义了一个自定义元素，我们可以在文档中使用它：
<my-element>Hello, World!</my-element>
这将在文档中创建一个自定义元素，并将 "Hello, World!" 显示在组件内部。请注意，我们没有指定组件样式或脚本，因为它们已经被定义在组件内部了。
总结
Web Components 是一种有助于构建可重用组件的 Web 平台 API。它使用自定义元素、影子 DOM、HTML 模板和 ES 模块，这些技术为我们提供了一种定义自己的元素并在应用程序中重复使用的方法。在此教程中，我们创建了一个简单的组件来展示 Web Components 的基础知识，并对其进行了解释。现在您已经了解 Web Components 的基础知识，希望您可以使用这种技术构建更复杂和有用的组件！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0a8f348841e9894cbdbb1