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 DOM
    this.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-element
  const myElement = document.createElement('my-custom-element');
  document.body.appendChild(myElement);
});

各大浏览器兼容性

1. Chrome：从 Chrome 36 开始支持。
2. Firefox：从 Firefox 63 开始支持。
3. Safari：从 Safari 10 开始支持。
4. Edge：从 Edge 14 开始支持。
5. Opera：从 Opera 23 开始支持。

END.

原文地址：https://blog.csdn.net/qq_35876316/article/details/143630047

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！