WebComponent adoptedCallback 什么时候触发？

Question

在 MDN 文档中，我看到 WebComponents 可以实现的一个功能叫做 adoptedCallback。 MDN 文档指出：

"Invoked when the custom element is moved to a new document."

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

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

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

Answer 1

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

当你的页面中有 <iframe> 个元素时，你会遇到这个用例：每个页面都有自己的 HTML 文档，主页和 <iframe> 元素中的每个页面.

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

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

示例：如果您想在元素添加到文档时显示特殊交互，而不是在元素最初位于其中时，您不会在 constructor() 或 [=18= 中执行此操作]，但您可以在 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 导入加载 HTML 个文档时。

WebComponent adoptedCallback 什么时候触发？

When does WebComponent adoptedCallback fire?

javascript

web-component

custom-element