Web Components 是一种新兴的前端技术，它可以帮助开发者实现可复用的自定义组件，这些组件可以方便地在多个项目中使用。本文将介绍 Web Components 中的 Custom Elements，展示如何利用 Custom Elements 实现一个简单的组件。
Custom Elements 是什么？
Custom Elements 是 Web Components 的核心 API 之一，它允许开发者定义自己的 HTML 元素并在 DOM 中自定义其行为。可以不依靠任何框架和库来实现组件的复用，从而有效地提高代码的可维护性和可读性。
一个 Custom Element 由两个部分组成：
- Element Definition：定义了一个新的 HTML 标签的名称和它的行为。
- Element Instance：一个使用了自定义元素的实例，即 Web Components。
如何使用 Custom Elements？
定义一个 Custom Element 只需使用两个 API：customElements.define() 和 class extends HTMLElement。
以下是一个定义了一个新的 <my-element> 元素并添加了 click 事件监听器的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
------------------------------ -- -- ---------------------- --- -----------
-
-
----------------------------------- -----------可以看到，我们使用了类来定义一个新的元素，构造函数 super() 向 HTMLElement 基类的构造函数传递了参数，并提供了 connectedCallback() 方法来监听元素的连接事件。接着在自定义元素定义后使用 customElements.define() API 注册这个新元素。
实现一个简单的组件
让我们以一个简单的例子来演示如何使用 Custom Elements 实现可复用的组件，一个简单的 Rating 组件。
实现这个 Rating 组件需要遵循以下步骤：
- 定义 HTML 模板
- 声明组件类
- 定义 Shadow DOM 根节点和样式
- 编写组件行为
-- -------------------- ---- -------
--------- ---------------------
-------
-------- -
-------- -------------
------- -----
-------------- ----
-
----- -
-------- -------------
------ -----
------- -----
------------- ----
----------- ----------------------------------------------------------------------------------------
---------------- ---- -----
-
----- -
---------------------- ------
----------------- -------
-
--------
---- ----------------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
---- -------------------
------
-----------
--------
----- ------ ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------------------------------------------------------------------------------
---------- - ------------------------------------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
------------------------
-
-
--------------- -
----- - --------------- -- --
------------------------- ------ -- -
-- ------ - ------ -
---------------------------
- ---- -
------------------------------
-
---
-
-
---------------------------------- --------
---------可以看到，我们在 HTML 模板中定义了一个星星效果的布局，使用 JavaScript 定义组件类并设置 shadow DOM 根节点将模板添加到组件中。在 setValue() 方法中，我们通过 Array.from() 方法将 shadow DOM 中包含的所有星形元素存储到 this.stars 中，随后根据 value 属性值来修改元素的样式。
接着我们使用 customElements.define() 注册自定义组件 "my-rating"，使得浏览器可以渲染它，一旦我们把它加入到页面的文档流中，它就会自动呈现出来。
如何使用组件？
我们现在可以像使用任何其他 HTML 元素一样使用组件，只需要在 HTML 中创建自定义的 <my-rating> 元素并为其设置 value 属性值即可。
<my-rating value="3"></my-rating>
我们还可以以编程方式操控自定义组件，使用以下命令来设置 value 属性的值：
document.querySelector('my-rating').setAttribute('value', 5);总结
在本文中，我们学习了如何使用 Custom Elements 实现一个 Rating 组件。尽管 Custom Elements API 适用于简洁和复杂的组件，但对于比较简单的场景，这种技术可能会感觉有些繁琐。然而，使用 Web Components 会让你的代码变得更加规范化和组织有序，并且可以提升代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0fb3a48841e9894d40d83