Web 组件在前端开发中是非常重要的一部分，它们可以让我们的代码更加模块化、可重用。Custom Elements 是原生 Web Components API 的一部分，它提供了一种轻松构建可重用 Web 组件的方式。在本文中，我将向您介绍如何使用 Custom Elements 构建可重用的 Web 组件，并提供示例代码和实用建议。
什么是 Custom Elements？
Custom Elements 是 Web Components API 的一部分，它允许我们创建自己的 HTML 标签和元素，并定义它们的行为和功能。这些自定义元素可以使用现有的 HTML 和 CSS 样式，可以方便地与其他库和框架集成。
Custom Elements API 有两个重要的主要方法：
customElements.define()：此方法用于定义自定义元素。connectedCallback()：这个回调方法在元素被插入到文档时调用。
如何使用 Custom Elements？
让我们来构建一个简单的可重用 Web 组件以演示 Custom Elements 的用法。
首先，让我们创建一个 HTML 文件，其中包含一个自定义元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ---------------
-------
------
-------------------------
-------
------- -----------------------------
-------当前 HTML 文件中，我们定义了一个自定义元素 my-element，它是由 JavaScript 文件 my-element.js 创建的。
接下来，我们来创建 my-element.js 文件来定义自定义元素及其行为。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------ ---------
-
------------------- -
------------------------- - -
-------
-- - ------ ---- -
--------
-------- -- -- ------ ------------
--
-
-
----------------------------------- -----------在 JavaScript 文件中，我们继承了 HTMLElement 类，并定义了两个方法。在 constructor() 方法中，我们创建了一个影子 DOM 树，并在 connectedCallback() 方法中向影子树添加了 HTML 和 CSS。
这里的 connectedCallback() 方法在元素被插入到文档时自动调用。我们可以在这个方法中进行一些列初始化操作，比如渲染、添加监听器等。
在 JavaScript 文件的最后，我们使用 customElements.define() 方法来定义我们的自定义元素 my-element，并将其与 MyElement 类相关联。
现在我们已经成功地创建了一个自定义元素。我们只需在 HTML 中使用 <my-element></my-element> 标记即可将其插入到文档中。
如何重用自定义元素？
现在我们已经知道如何创建一个自定义元素。接下来，我们来看看如何在项目中重复使用它。
首先，我们需要创建一个 .js 文件来定义我们的自定义元素。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------ ---------
-
------------------- -
------------------------- - -
-------
-- - ------ ---- -
--------
-------- -- -- ------ ------------
--
-
-
----------------------------------- -----------在这个 .js 文件的末尾，我们使用 customElements.define() 方法来定义自定义元素，并将其与 MyElement 类相关联。在我们的代码库中，我们可以将这个 .js 文件与其他组件一起打包，这样我们就可以使用 my-element 标记在整个项目中定义我们的自定义元素。
在 Custom Elements 中使用属性
我们还可以使用属性来个性化自定义元素。让我们来演示如何在 my-element 中使用属性。
首先，我们来创建一个 my-element.js 文件，并添加属性功能：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ --------- -----------
-
------------- -
--------
------------------------ ---------
-
------------------------------ ------- ------- -
-- ------- --- ------- -
------------ -
---- --------
----------- - -------
------
---- ----------
------------- - -------
------
-
--------------
-
-
------------------- -
--------------
-
-------- -
------------------------- - -
-----------------------
-----------------------
--
-
-
----------------------------------- -----------在这个版本的 my-element 类中，我们定义了一个静态方法 observedAttributes()，它返回需要监听的属性列表。在我们的例子中，我们监听了 title 和 content 属性。
在 attributeChangedCallback() 方法中，我们根据属性名称和值变化执行相应的操作。在这个例子中，我们简单地将新值保存到类的私有变量中，并重新渲染元素。
最后，我们还添加了一个 render() 方法来动态生成 HTML 代码。
现在我们可以使用自定义元素 my-element 带上它的 title 和 content 属性：
<my-element title="Hello" content="World"></my-element>
这将在浏览器中渲染出：
Hello World
结论
在本文中，我们已经学习了如何使用 Custom Elements 构建可重用的 Web 组件，以及如何在自定义元素中使用属性来动态生成内容。Custom Elements API 不仅可以提高开发效率，还可以提高代码重用性。我希望这篇文章能帮助您更好地理解 Custom Elements，并在您的项目中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb547544713626015b78ba