Custom Elements 是一个由 Web 标准制定机构（W3C）发布的 Web 组件规范，它允许开发者创建自定义 HTML 元素并对其行为进行规范化和封装，从而提高 Web 应用的可重用性和可维护性。在本文中，我们将介绍如何使用 Custom Elements 构建你自己的第一个 Web 组件。
步骤一：定义你的组件类
在 Custom Elements 中，组件类是由 JavaScript 类定义的，它可以继承自原生的 HTML 元素类或其他组件类。在组件类中，你可以定义组件的样式、行为和属性等。
下面是一个简单的示例代码，它定义了一个名为 "my-element" 的组件类，该类继承自 HTMLDivElement 类，并添加了一个属性 "name"，并在组件的生命周期钩子函数 connectedCallback 中渲染了组件的初始内容：
-- -------------------- ---- -------
----- --------- ------- -------------- -
------------- -
--------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
------------------- -
-------------- - ------- ---------------
-
-
----------------------------------- ---------- - -------- ----- ---在上面的代码中，我们使用了 customElements.define 方法来注册我们的组件类，并指定了组件的标签名为 "my-element"，同时通过第三个参数指定了我们的组件类继承自原生的 HTMLDivElement 类。
步骤二：使用你的组件
在组件类定义完成后，我们可以在任何 HTML 页面中使用它。使用该组件只需要在 HTML 中添加组件标签 "my-element"，就可以看到组件在页面中的呈现。
<my-element name="Alice"></my-element>
上面的代码将在页面中渲染出一个 "Hello, Alice!" 的文本。
步骤三：使用组件属性
除了在组件类中定义属性之外，我们还可以在 HTML 中通过属性来传递数据给组件。
在我们的示例中，我们定义了一个名为 "name" 的属性。我们可以在 HTML 中添加属性来为组件指定一个名称：
<my-element name="Bob"></my-element>
这时，组件将显示 "Hello, Bob!" 的文本，因为它使用了传递过来的组件属性。
除了 get 和 set 方法，我们还可以使用 observedAttributes 静态属性来声明可以被监听的属性列表：
class MyElement extends HTMLDivElement {
static get observedAttributes() {
return ['name'];
}
// ...
}当我们声明了 observedAttributes 属性之后，在属性值发生改变时，attributeChangedCallback 钩子函数会被调用。
-- -------------------- ---- -------
----- --------- ------- -------------- -
-- ---
------------------------------ --------- --------- -
-- ----- --- ------- -
-------------- - ------- --------------
-
-
-上面的代码中，我们重写了 attributeChangedCallback 钩子函数，用来监听组件属性 "name" 的变化，并在属性值发生改变时更新组件的内容。
总结
自定义组件是 Web 开发中非常重要的一项技术，它可以帮助我们创建自己的可复用组件库，从而提高代码的可维护性和可重用性。本文介绍了如何使用 Custom Elements 构建一个简单的自定义组件类，并在 HTML 中使用它。希望这篇文章能够给你带来启发，并帮助你更好地理解和应用自定义组件技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffca9f95b1f8cacde14c16