javascript - WebComponent adoptedCallback 什么时候触发？

Question

在 MDN 文档中，我看到 WebComponents 可以实现的一个函数叫做 adoptedCallback。 MDN 文档指出:

“当自定义元素移动到新文档时调用。”

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

https://github.com/w3c/webcomponents/issues/512

自定义元素已移至新文档是什么意思？什么情况下应该实现？

Answer 1

adoptedCallback( ) 方法在使用 adoptNode() 将自定义元素从一个 HTML 文档移动到另一个 HTML 文档时被调用。方法。

当您拥有 <iframe> 时，您将遇到此用例页面中的元素:每个页面都有自己的 HTML 文档，主页和 <iframe> 中的每个页面元素。

当您将一个元素从一个框架移动到另一个框架(或移动到邮件文档)时，它的 ownerDocument使用新的 HTMLDocument 更新引用，但元素未被破坏和创建。这意味着 constructor()方法不会被调用。

---

只有当您的自定义元素将在多文档上下文中使用并且您需要执行一些不应该在 connectedCallback() 中执行的特殊操作时，您才应该实现此方法。 ，例如与所有者文档、主文档或其他元素的交互。

示例:如果您想在元素添加到文档时显示特殊交互，而不是最初在其中时，您不会在 constructor() 中执行此操作或在 connectedCallback() , 但你可以在 adoptedCallback() 中完成.

adoptedCallback() {
    //change the color to red for 2 seconds
    var slot = this.shadowRoot.querySelector("slot")
    slot.classList.add( "red" )
    setTimeout( () => slot.classList.remove( "red" ), 2000)
}

---

当您创建自定义元素时，它的回调将按以下顺序调用:constructor > connectedCallback

当您使用 adoptNode() 移动自定义元素时，回调按以下顺序调用:disconnectedCallback (使用源文档中的 ownerDocument 设置)> adoptedCallback (使用新文档中的 ownerDocument 设置)> connectedCallback .

当您使用 importNode() 克隆自定义元素时，回调按以下顺序调用:constructor > connectedCallback .

请注意 connectedCallback()在创建新的自定义元素时调用，但在移动元素时也会调用。这就是为什么您不应该在该方法中执行一次性或昂贵的初始化，例如数据加载。

---

您可以在其他情况下处理多个文档，例如，当您通过 HTML Imports 加载 HTML 文档时。