Web Components 是一个用于创建可复用的组件的新技术，它允许开发人员创建自定义 HTML 元素，即 Web 组件，从而大大简化了 Web 应用程序的开发。 Custom Elements 是 Web Components 规范的主要部分之一，它允许你定义自己的 HTML 标签并将其封装在一个自定义元素类中。本文将介绍如何使用 Custom Elements 建立可复用的 Web Components。
Custom Elements 概览
Custom Elements 是 Web Components 技术的一部分，它的主要作用是让开发人员能够创建自定义 HTML 元素。使用 Custom Elements 可以让开发人员将自己定义的元素打包成一个新的 HTML 标签，并且能够在任何 HTML 文档中使用这个新的标签。
Custom Elements 是通过继承 HTMLElement 类来创建的，这个类提供了一些标准行为和特性，让你轻松地扩展已经存在的 HTML 标签或创建全新的元素。
创建 Custom Elements
要创建 Custom Elements，我们需要使用 document.registerElement() 方法。这个方法允许你将一个新元素注册到浏览器的元素库中。
class MyElement extends HTMLElement {
constructor() {
super();
// ...
}
}
customElements.define('my-element', MyElement);上面的示例代码定义了一个名为 MyElement 的自定义元素，并将其注册到浏览器中使用。
操作 Custom Elements
一旦你成功地创建了一个 Custom Element，你可以通过对元素类的实例化来使用它。下面是一个简单的示例，展示了如何使用自定义元素：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ------------
-------
------
-------------------------
------- ------------- -----------------------------
-------
-------在上面的示例中，元素被插入到 HTML 中，并且通过一个 script 标签引用了 my-element.js 文件，这个文件定义了 MyElement 类。
添加样式和行为
可以直接在 MyElement 类中添加任意的 CSS 样式和 JavaScript 行为。下面是一个示例，添加了一个名为 "disabled" 的属性以及一个名为 "click" 的事件：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------
-
------------------- -
------------------------------ --------------------------
-
--- ---------- -
------ ---------------
-
--- --------------- -
-------------- - ------
-- ------- -
----------------------------- ----
- ---- -
---------------------------------
-
-
--------------- -
-- ---------------- -
-----------------------
-
-
-
----------------------------------- -----------上面的示例中，MyElement 类添加了一个名为 "disabled" 的属性，并且当这个属性设置为 true 时，会将元素设置为禁用状态。此外，当元素被点击时，会检查是否禁用，如果禁用则会阻止默认行为。
总结
通过使用 Custom Elements 可以轻松地创建可复用的 Web Components。在自定义元素的类中，可以添加自定义样式和行为，实现自己的需求。希望通过这篇文章的介绍，读者能够更好地理解如何使用 Custom Elements 建立可复用的 Web Components，并且在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462fd2d968c7c53b0407566