什么是 Custom Elements？
Custom Elements 是以 web component 规范为基础的一项技术，它能为开发者提供一种创建自定义 HTML 元素的能力。Custom Elements 允许开发者在 web 项目中扩展 HTML 标签和属性，以及提供自己的行为。
如何创建 Custom Elements？
Custom Elements 可以通过继承 HTMLElement 来实现，例如：
class MyCustomElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Hello World';
}
}
customElements.define('my-custom-element', MyCustomElement);在上面的示例中，我们定义了一个名为 MyCustomElement 的新元素，而 connectedCallback 方法则会在元素被加入到文档中时自动调用。在 connectedCallback 方法体内，我们把元素的 textContent 设置为了 'Hello World'。
当然，我们也可以进一步定制自己的元素，例如添加属性和方法等：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------ --- -------------------- -
------ ------------
-
------------------- -
---------------- - -----------------------------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
---------------- - ---------
-
-
---------- -
-- ---
-
-
------------------------------------------ -----------------在上面的示例中，我们定义了一个叫做 my-attr 的属性，并监听它的变化。当属性变化时，我们会在 attributeChangedCallback 方法中将元素的 textContent 更新为新的属性值。
Custom Elements 的使用场景
Custom Elements 可以用来创建一些类似于 web 组件的自定义元素，也可以让开发者充分利用自定义元素的扩展能力，开发更加灵活的 web 应用。
构建组件库
Custom Elements 可以轻松地实现组件化构建，让开发者易于维护和复用组件。可以在自定义元素中定义组件的结构、样式和行为，而不必每次构建组件都需要写很多的样板代码。
<my-button>Click Me!</my-button> <my-button size="small">Click Me!</my-button>
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------------------ ---------
------------------------- - -
-------
------ -
-------- -----
-
--------------------- ------ -
-------- ----
-
--------
------------------------------
--
-
-
---------------------------------- ----------在上面的示例中，我们定义了一个名为 MyButton 的自定义元素，它拥有一个默认的 "Click Me!" 按钮和一个可以通过 size 属性调整大小的按钮。这样我们就可以多次使用 MyButton 元素，而不需要重复编写样式和结构。
与 JavaScript 库的集成
Custom Elements 可以与 JavaScript 库进行集成，以便于构建更加丰富的 web 应用。开发者可以在 library 代码中创建自定义元素，并将其公开给其他开发者进行调用和集成。
例如，在 React 组件库中，可以通过 Custom Elements 快速构建出一个能够和 React 库集成的组件库。这样可以让开发者无缝使用自定义元素和 React 组件，并轻松跨语言和跨架构实现 web 应用的多层面构建。
总结
Custom Elements 是一项极其方便的技术，它提供了一种创建自定义 HTML 元素的能力。Custom Elements 的使用场景丰富，无论是构建组件库，还是与 JavaScript 库集成，都可以在开发中发挥重要的作用。开发者可以通过 Custom Elements 构建高效灵活的 web 应用，提升开发质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64717c56968c7c53b0f591d1