什么时候 WebComponent 被采纳回调触发? [英] When does WebComponent adoptedCallback fire?
问题描述
在 MDN 文档中,我看到 WebComponents 可以实现一个名为 adoptedCallback
的函数.MDN 文档说明:
On MDN documentation, I see a function that WebComponents can implement called adoptedCallback
. MDNs documentation states:
在自定义元素移动到新文档时调用."
"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
自定义元素已移至新文档是什么意思?在什么情况下我应该实施这个?
What does it mean that the custom element has moved to a new document? Under what circumstances should I implement this?
推荐答案
adoptedCallback(
) 方法在自定义元素从一个 HTML 文档移动到另一个带有 adoptNode()
方法.
The adoptedCallback(
) method is called when a Custom Element is moved from one HTML document to another one with the adoptNode()
method.
当您的页面中有 元素时,您将遇到此用例:每个页面都有自己的 HTML 文档、主页和
元素.
You will meet this use case when you have <iframe>
elements in you page: each page will have its own HTML document, the main page and every pages in <iframe>
elements.
当您将一个元素从一个框架移到另一个框架(或邮件文档)时,它的 ownerDocument
会更新为新的 HTMLDocument
参考,但该元素没有被破坏和创建.这意味着不会调用 constructor()
方法.
When you move an element from one frame to another (or to the mail document), its ownerDocument
is updated with the new HTMLDocument
reference but the element is not destructed and created. That means that the constructor()
method will not be called.
仅当您的自定义元素将在多文档上下文中使用并且您需要执行一些不应在 connectedCallback()
中执行的特殊操作时,才应实现此方法,例如与所有者文档、主文档或其他元素的交互.
You should implement this method only if your custom element will be used in a multi-document context and when you need to perform some special operations that should not be done in connectedCallback()
, for example interactions with the owner document, the main document, or other elements.
例子:如果你想在元素被添加到文档时显示一个特殊的交互,而不是当它原来在里面时,你不会在constructor()
或connectedCallback()
,但你可以在adoptedCallback()
中实现.
Example: if you want to display a special interaction when the element is added to the document, but not when is originally inside it, you won't do it in constructor()
or in connectedCallback()
, but you can do it in 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
.
When you move a custom element whith adoptNode()
, the callback are called in this order: disconnectedCallback
(with ownerDocument
set from source document) > adoptedCallback
(with ownerDocument
set from new document) > connectedCallback
.
当您使用 importNode()
克隆自定义元素时,回调将按以下顺序调用:constructor
> connectedCallback
.
When you clone a custom element whith importNode()
, the callback are called in that order: constructor
> connectedCallback
.
请注意 connectedCallback()
在创建新的自定义元素时会被调用,但在移动时也会调用.这就是为什么你不应该在方法中执行一次性或昂贵的初始化,比如数据加载.
Note that connectedCallback()
is called when a new custom element is created, but also when it is moved. That's why you should not perform one-time or expensive initializations, like data loading, in the method.
您可以在其他情况下处理多个文档,例如当您通过 HTML 导入加载 HTML 文档时.
You can deal with multiple documents in other situations, for example when you load HTML documents via HTML Imports.
这篇关于什么时候 WebComponent 被采纳回调触发?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!