window.customElements 是一个用于注册和定义自定义元素（Web Components）的接口。通过 customElements.define 方法，你可以创建和注册新的 HTML 元素，并为这些元素定义自定义行为。
使用步骤
- 创建一个类：定义一个继承自
HTMLElement的类，并在其中实现自定义元素的行为。 - 注册自定义元素：使用
customElements.define方法将自定义元素注册到浏览器中。
示例
以下是一个完整的示例，展示如何使用 window.customElements 注册和使用自定义元素：
1. 创建一个类
首先，定义一个继承自 HTMLElement 的类，并在其中实现自定义元素的行为。
javascript
class MyCustomElement extends HTMLElement {
constructor() {
super(); // 必须首先调用 super()
this.attachShadow({ mode: 'open' }); // 创建一个 shadow DOM
this.shadowRoot.innerHTML = `
<style>
p {
color: blue;
}
</style>
<p>Hello, Custom Element!</p>
`;
}
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute: ${name} changed from ${oldValue} to ${newValue}`);
}
static get observedAttributes() {
return ['data-custom'];
}
}2. 注册自定义元素
使用 customElements.define 方法将自定义元素注册到浏览器中。
javascript
customElements.define('my-custom-element', MyCustomElement);3. 使用自定义元素
现在你可以在 HTML 中使用自定义元素：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Element Example</title>
</head>
<body>
<my-custom-element data-custom="example"></my-custom-element>
<script src="custom-element.js"></script>
</body>
</html>解释
MyCustomElement类：继承自HTMLElement，并实现了自定义元素的行为。constructor：调用 super() 并创建一个 shadow DOM。connectedCallback：当自定义元素被添加到文档时调用。disconnectedCallback：当自定义元素从文档中移除时调用。attributeChangedCallback：当自定义元素的属性发生变化时调用。observedAttributes：指定要观察的属性列表。
customElements.define方法：将自定义元素注册到浏览器中。- 第一个参数是自定义元素的标签名，必须包含一个连字符（例如
my-custom-element）。 - 第二个参数是自定义元素的类。
- 第一个参数是自定义元素的标签名，必须包含一个连字符（例如
- 使用自定义元素：在 HTML 中使用自定义元素标签
<my-custom-element>。
总结
window.customElements：用于注册和定义自定义元素的接口。customElements.define方法：将自定义元素注册到浏览器中。- 自定义元素类：继承自
HTMLElement，并实现自定义元素的行为。 - 生命周期回调：包括
connectedCallback、disconnectedCallback和attributeChangedCallback。