window属性：customElements

window.customElements 是一个内置的 Web API，它提供了一组方法来定义和使用自定义元素。这个 API 是 Web Components 规范的一部分，允许开发者创建新的 HTML 标签，这些标签可以拥有自定义的行为和样式。

自定义元素提供了一种强大的方式扩展 HTML，但它们应该谨慎使用，以保持语义化的 HTML 和可访问性。

属性和方法

window.customElements 对象包含以下方法：

define(name, constructor)：定义一个新的自定义元素。
get(name)：获取一个已定义的自定义元素的构造函数。
whenDefined(name)：返回一个 promise，当指定的自定义元素被定义时解析。

define()定义自定义元素

使用 customElements.define() 方法来定义一个新的自定义元素。这个方法接受两个参数：自定义元素的名称和一个继承自 HTMLElement 的构造函数。

※ 自定义元素的构造函数中可以定义生命周期回调方法，如 connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。

// 定义一个新的自定义元素
class MyCustomElement extends HTMLElement {constructor() {super(); // 调用父类的构造函数this.attachShadow({ mode: 'open' }); // 创建 Shadow DOMthis.shadowRoot.innerHTML = `<style>p { color: red; }</style><p> Hello, World! </p>`;}connectedCallback() {console.log('MyCustomElement was inserted into the DOM.');}disconnectedCallback() {console.log('MyCustomElement was removed from the DOM.');}
}// 注册自定义元素
customElements.define('my-custom-element', MyCustomElement);

使用自定义元素

一旦自定义元素被定义，你可以像使用普通 HTML 元素一样在 HTML 文档中使用它。

※ 自定义元素的名称必须包含一个连字符（-），这是 Web Components 规范的要求。

HTML 中直接使用

<my-custom-element></my-custom-element>

JavaScript 中动态创建和使用

// 创建一个新的自定义元素实例
const myElement = document.createElement('my-custom-element');// 将元素添加到文档中
document.body.appendChild(myElement);

获取自定义元素的构造函数

使用 customElements.get() 方法来获取已定义的自定义元素的构造函数。

const MyCustomElementConstructor = customElements.get('my-custom-element');
const myElementInstance = new MyCustomElementConstructor();
document.body.appendChild(myElementInstance);

等待自定义元素定义完成

使用 customElements.whenDefined() 方法来获取一个 promise，该 promise 在指定的自定义元素被定义时解析。

customElements.whenDefined('my-custom-element').then(() => {console.log('my-custom-element is defined');// 可以安全地创建和使用 my-custom-elementconst myElement = document.createElement('my-custom-element');document.body.appendChild(myElement);
});