在传统的 Web 开发中，我们往往会使用一些第三方框架或者库来构建我们的页面和组件。但是，这些框架或库往往不够灵活，我们无法完全按照自己的需求来定制组件。
那么有没有一种方式可以让我们自由地定义我们需要的 Web 组件呢？答案是肯定的。Custom Elements 标准就是一种方便的方式，用它可以轻松地创建自定义的 HTML 元素，并且具备可复用性和扩展性。
Custom Elements 是什么？
Custom Elements 是一个正在被 W3C 标准化的技术，它允许我们定义自己的 HTML 元素，并在 Web 页面中使用它们。通过这种方式，我们可以创建具有自定义功能和样式的元素，甚至可以添加新的 API 接口以支持更多的交互和行为。
如何定义 Custom Elements？
定义一个 Custom Element 非常简单，只需要使用原生的 JavaScript 代码即可。下面是一个基本的 Custom Element 的示例：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-- -------------
-
------------------- -
-- ------------
-
---------------------- -
-- ------------
-
------------------------------ --------- --------- -
-- ------------
-
----------------- -
-- -------------------
-
-
---------------------------------------------- ---------------在上面的示例中，我们定义了一个名为 custom-element 的 Custom Element，它继承自 HTMLElement 类。因为 HTMLElement 类是实现了 Web Components 标准的一个基本类，因此我们可以使用它作为 Custom Element 的基类。
除了继承 HTMLElement 类以外，我们还需要实现几个回调函数，它们分别是：
constructor：在对象创建时被调用connectedCallback：在元素插入到页面时调用disconnectedCallback：在元素从页面中移除时调用attributeChangedCallback：在元素的属性发生变化时调用adoptedCallback：在元素从一个文档转移到另一个文档时调用
有了以上这些函数，我们就可以通过 JavaScript 对我们的 HTML 元素进行完全的控制和自定义了。
如何使用 Custom Elements？
使用 Custom Elements 和使用普通的 HTML 元素没有什么区别，我们只需要像下面这样使用即可：
<custom-element></custom-element>
在使用 Custom Element 时，我们可以给它设置属性，这些属性可以通过 attributes 属性来获取，比如：
<custom-element name="John" age="26"></custom-element>
在 JavaScript 中，我们可以通过以下方式来获取这些属性：
class CustomElement extends HTMLElement {
constructor() {
super();
console.log(this.getAttribute('name')); // "John"
console.log(this.getAttribute('age')); // "26"
}
}相信大家已经可以看出来，通过 Custom Elements，我们可以非常轻松地实现自己需要的 Web 组件，而不需要依赖第三方库或者框架。这样不仅让我们的开发更加灵活，而且也可以大大提高组件的可复用性和扩展性。
总结
Custom Elements 为我们提供了一种非常自由和灵活的方式，让我们能够自己定制自己的 Web 组件。通过定义 Custom Elements，我们可以让页面更加具有可组合性和扩展性，从而提高整个 Web 应用的质量和可维护性。
如果您对 Custom Elements 感兴趣，不妨尝试实现一些自己的组件，并且结合其他 Web 技术一起使用，相信您一定会有意想不到的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b955d968c7c53b0ad902f