什么是 Custom Elements？
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素并将其添加到文档中。这些自定义元素可以包含自己的样式和行为，这样开发者就可以创建具有更高可重用性和可扩展性的组件。
Custom Elements 的扩展机制
Custom Elements 有两种扩展机制：继承和混合。继承允许开发者创建一个自定义元素，该元素从另一个自定义元素继承其行为和样式。混合允许开发者将多个行为混合到一个自定义元素中，以创建一个具有多个功能的元素。
继承
要创建一个继承自另一个自定义元素的元素，开发者可以使用 ES6 类和 extends 关键字。例如，下面的代码创建了一个继承自 <button> 元素的自定义元素：
class MyButton extends HTMLButtonElement {
constructor() {
super();
this.classList.add('my-button');
}
}
customElements.define('my-button', MyButton, { extends: 'button' });在上面的代码中，MyButton 类继承自 HTMLButtonElement 类，因此它具有 <button> 元素的所有行为和样式。开发者可以在 constructor 方法中添加自己的样式和行为。最后，使用 customElements.define 方法将自定义元素注册到文档中。
混合
要创建一个混合多个行为的元素，开发者可以使用 ES6 类和 mixins。例如，下面的代码创建了一个具有 Resizable 和 Draggable 行为的自定义元素：
-- -------------------- ---- -------
----- --------- - ------ -- ----- ------- ---- -
-------- -
------------------------
-
--
----- --------- - ------ -- ----- ------- ---- -
------ -
------------------------
-
--
----- --------- ------- --------------------------------- -
------------- -
--------
---------------------------------
-
-
----------------------------------- -----------在上面的代码中，Resizable 和 Draggable 是两个混合函数，它们接受一个基类并返回一个新的类，该类具有添加的行为。MyElement 类继承自 Resizable(Draggable(HTMLElement))，这意味着它具有 HTMLElement、Draggable 和 Resizable 的所有行为。最后，使用 customElements.define 方法将自定义元素注册到文档中。
动态加载 Custom Elements
在大型应用程序中，自定义元素可能会很多，而且不需要在页面加载时都加载到文档中。因此，动态加载 Custom Elements 是非常必要的。
动态注册 Custom Elements
要动态注册 Custom Elements，开发者可以使用 customElements.whenDefined 方法。例如，下面的代码在 window 对象上添加了一个 loadElement 方法，该方法接受一个元素名称和一个 URL，并在元素未定义时动态加载元素定义：
-- -------------------- ---- -------
------------------ - ------ ---- -- -
-- --------------------------- -
------ ----------
---------------- -- ----------------
------------ -- -
----- ------ - --- ------------
----- --- - ---------------------------- -------------
----- ------- - ----------------------------------
-- --------- -
--------------------------- ---------------------
------ ---------------------------------
-
----- --- -------------- ------- --- ----- -- ---------
---
-
------ ------------------
--在上面的代码中，loadElement 方法首先检查元素是否已定义。如果元素未定义，则使用 fetch 方法从 URL 加载 HTML，然后使用 DOMParser 将其解析为文档。接下来，它查找具有指定名称的元素，并使用 customElements.define 方法将其定义。最后，它返回一个 Promise，该 Promise 在元素被定义时解决。
动态加载 Custom Elements 的依赖
在某些情况下，自定义元素可能依赖于其他自定义元素或 JavaScript 模块。要动态加载这些依赖项，开发者可以使用 import 和 Promise.all 方法。例如，下面的代码动态加载了一个依赖于 my-button 元素的自定义元素：
-- -------------------- ---- -------
-------------------------------- ------------------
-------- -- -------------
------------------------------- ------------------
-------------------------
---
-------- -- -
----- ------- - -------------------------------------
-----------------------------------
--
-------------- -- ----------------------在上面的代码中，loadElement 方法动态加载了 my-element 元素定义。然后，Promise.all 方法并行加载了 my-button 元素和 my-module.js 模块。最后，它创建了一个 my-element 元素并将其附加到文档中。
总结
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素并将其添加到文档中。Custom Elements 有两种扩展机制：继承和混合。动态加载 Custom Elements 是非常必要的，可以提高应用程序的性能和可维护性。开发者可以使用 customElements.whenDefined 方法动态注册 Custom Elements，并使用 import 和 Promise.all 方法动态加载 Custom Elements 的依赖项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658d3cddeb4cecbf2d330192