Web Components 是一种用于创建可重用的、可组合的 Web 应用程序的技术。它们允许您将 UI 组件封装在自定义元素、Shadow DOM 和 HTML 模板中，并提供了一种可重用的、可组合的方式来构建 Web 应用程序。
在本文中，我们将介绍如何使用 Custom Elements 和 Shadow DOM 创建 Web Components，并提供一些示例代码和指导意义来帮助您开始构建自己的 Web Components。
Custom Elements
Custom Elements 允许您创建自定义 HTML 元素，并为这些元素定义自己的行为和属性。要创建一个自定义元素，您需要使用 customElements.define 方法来注册它。
以下是一个简单的示例，展示了如何创建一个自定义元素：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------- --------
-
-
----------------------------------- -----------
---------在这个例子中，我们创建一个名为 MyElement 的自定义元素，并将其注册为 my-element。我们还在构造函数中设置了元素的文本内容。
Shadow DOM
Shadow DOM 允许您将元素的样式和行为封装在一个独立的 DOM 子树中，从而避免与外部文档的样式和行为冲突。
要创建一个 Shadow DOM，您需要使用 element.attachShadow 方法。以下是一个示例，展示了如何创建一个具有 Shadow DOM 的自定义元素：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- - - ----------------------------
------------- - ------- --------
----------------------
-
-
----------------------------------- -----------
---------在这个例子中，我们创建了一个 Shadow DOM，并向其中添加了一个 <p> 元素。注意，我们使用了 mode: 'open' 参数来指定 Shadow DOM 是开放的，这意味着外部文档可以访问它。
Web Components
现在我们已经了解了 Custom Elements 和 Shadow DOM，让我们看看如何将它们结合起来创建一个 Web Component。
以下是一个示例，展示了如何创建一个具有 Shadow DOM 的自定义元素，并将其封装在一个 Web Component 中：
-- -------------------- ---- -------
-----------------------
--------
----- -------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ------ - ---------------------------------
------------------ - -------------------------- -- ------ ----
---------------------------
-------------------------------- -- -- -
----- ----- - --- ------------------------------ -
-------- -----
--------- -----
---
--------------------------
---
-
-
---------------------------------- ----------
---------在这个例子中，我们创建了一个名为 MyButton 的自定义元素，并将其注册为 my-button。我们还在构造函数中创建了一个 <button> 元素，并向其中添加了一个文本标签。
我们还添加了一个事件监听器，以便在用户单击按钮时触发 my-button-click 事件。注意，我们使用了 bubbles: true 和 composed: true 参数来确保事件在 Shadow DOM 树和外部文档中正确传播。
现在我们已经创建了一个 Web Component，让我们看看如何在 HTML 中使用它：
<my-button label="Hello"></my-button>
<script>
const button = document.querySelector('my-button');
button.addEventListener('my-button-click', () => {
console.log('Button clicked');
});
</script>在这个例子中，我们创建了一个具有 label 属性的 my-button 元素，并将其添加到 HTML 中。我们还添加了一个事件监听器，以便在按钮单击时记录日志消息。
结论
在本文中，我们介绍了如何使用 Custom Elements 和 Shadow DOM 创建 Web Components，并提供了一些示例代码和指导意义来帮助您开始构建自己的 Web Components。
如果您想深入了解 Web Components 的更多信息，请参阅 Web Components 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6761c373856ee0c1d4fb0fbf