什么是 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 行为的自定义元素：
const Resizable = (base) => class extends base {
resize() {
console.log('resizing');
}
};
const Draggable = (base) => class extends base {
drag() {
console.log('dragging');
}
};
class MyElement extends Resizable(Draggable(HTMLElement)) {
constructor() {
super();
this.classList.add('my-element');
}
}
customElements.define('my-element', MyElement);在上面的代码中，Resizable 和 Draggable 是两个混合函数，它们接受一个基类并返回一个新的类，该类具有添加的行为。MyElement 类继承自 Resizable(Draggable(HTMLElement))，这意味着它具有 HTMLElement、Draggable 和 Resizable 的所有行为。最后，使用 customElements.define 方法将自定义元素注册到文档中。
动态加载 Custom Elements
在大型应用程序中，自定义元素可能会很多，而且不需要在页面加载时都加载到文档中。因此，动态加载 Custom Elements 是非常必要的。
动态注册 Custom Elements
要动态注册 Custom Elements，开发者可以使用 customElements.whenDefined 方法。例如，下面的代码在 window 对象上添加了一个 loadElement 方法，该方法接受一个元素名称和一个 URL，并在元素未定义时动态加载元素定义：
window.loadElement = (name, url) => {
if (!customElements.get(name)) {
return fetch(url)
.then((response) => response.text())
.then((html) => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const element = doc.querySelector(`[is=${name}]`);
if (element) {
customElements.define(name, element.constructor);
return customElements.whenDefined(name);
}
throw new Error(`Element ${name} not found in ${url}`);
});
}
return Promise.resolve();
};在上面的代码中，loadElement 方法首先检查元素是否已定义。如果元素未定义，则使用 fetch 方法从 URL 加载 HTML，然后使用 DOMParser 将其解析为文档。接下来，它查找具有指定名称的元素，并使用 customElements.define 方法将其定义。最后，它返回一个 Promise，该 Promise 在元素被定义时解决。
动态加载 Custom Elements 的依赖
在某些情况下，自定义元素可能依赖于其他自定义元素或 JavaScript 模块。要动态加载这些依赖项，开发者可以使用 import 和 Promise.all 方法。例如，下面的代码动态加载了一个依赖于 my-button 元素的自定义元素：
window.loadElement('my-element', 'my-element.html')
.then(() => Promise.all([
window.loadElement('my-button', 'my-button.html'),
import('./my-module.js'),
]))
.then(() => {
const element = document.createElement('my-element');
document.body.appendChild(element);
})
.catch((error) => console.error(error));在上面的代码中，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