用于注册自定义元素window.customElements的使用

window.customElements 是一个用于注册和定义自定义元素（Web Components）的接口。通过 customElements.define 方法，你可以创建和注册新的 HTML 元素，并为这些元素定义自定义行为。

使用步骤

1. 创建一个类：定义一个继承自 HTMLElement 的类，并在其中实现自定义元素的行为。
2. 注册自定义元素：使用 customElements.define 方法将自定义元素注册到浏览器中。

示例

以下是一个完整的示例，展示如何使用 window.customElements 注册和使用自定义元素：

1. 创建一个类

首先，定义一个继承自 HTMLElement 的类，并在其中实现自定义元素的行为。

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 方法将自定义元素注册到浏览器中。

customElements.define('my-custom-element', MyCustomElement);

3. 使用自定义元素

现在你可以在 HTML 中使用自定义元素：

<!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>

解释

1. MyCustomElement 类：继承自 HTMLElement，并实现了自定义元素的行为。
   • constructor：调用 super() 并创建一个 shadow DOM。
   • connectedCallback：当自定义元素被添加到文档时调用。
   • disconnectedCallback：当自定义元素从文档中移除时调用。
   • attributeChangedCallback：当自定义元素的属性发生变化时调用。
   • observedAttributes：指定要观察的属性列表。
2. customElements.define 方法：将自定义元素注册到浏览器中。
   • 第一个参数是自定义元素的标签名，必须包含一个连字符（例如 my-custom-element）。
   • 第二个参数是自定义元素的类。
3. 使用自定义元素：在 HTML 中使用自定义元素标签 <my-custom-element>。

总结

• window.customElements：用于注册和定义自定义元素的接口。
• customElements.define 方法：将自定义元素注册到浏览器中。
• 自定义元素类：继承自 HTMLElement，并实现自定义元素的行为。
• 生命周期回调：包括 connectedCallback、disconnectedCallback 和 attributeChangedCallback。

通过使用 window.customElements，你可以创建和注册自定义元素，为你的 Web 应用程序添加自定义行为和功能。