HTML DOM customElements upgrade() 方法

简介

customElements.upgrade() 是一个用于手动触发 Custom Element 的 upgrade 过程的方法。所有满足 Custom Element 自定义元素的定义的元素都将在文档中触发此方法。

语法

customElements.upgrade(element);

参数

• element ：一个自定义元素。

示例

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('my-element', MyElement);

document.body.innerHTML = '<my-element></my-element>';

customElements.upgrade(document.querySelector('my-element'));

在上面的例子中，定义了一个自定义元素 my-element，并生成了一个元素实例。最后通过 customElements.upgrade() 方法手动触发该元素的 upgrade 过程。

使用场景

customElements.upgrade() 方法在两种常见的情况下会使用到：

• 当元素的内容经过替换（如 innterHTML 属性的更改或用于更新其子节点）时，文档的一部分可能已经注入了 Custom Element 的定义。这可能会导致 Custom Element 中的回调被阻止（例如 connectedCallback ）。
• 需要静态地添加新自定义元素标记到文档中的某个点并立即触发 Custom Element 过程。

注意事项

使用 customElements.upgrade() 方法要谨慎。它会触发已定义的每个自定义元素的生命周期方法，包括在单个 upgrade 调用中创建的元素的方法。

结束语

customElements.upgrade() 方法是一个用于手动触发 Custom Element 的 upgrade 过程的方法。在某些情况下，需要手动调用该方法来确保 Custom Element 的正常行为，但同时需要注意使用时的安全性。