javascript-WebComponent何时采用Callback触发？

在MDN文档中,我看到一个WebComponents可以实现的函数,称为AppliedCallback. MDN文档说明：

“将自定义元素移到新文档时调用.”

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

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

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

解决方法:

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

当您拥有< iframe>页面中的元素：每个页面将具有自己的HTML文档,主页以及< iframe>中的每个页面.元素.

当您将元素从一帧移动到另一帧(或邮件文档)时,其ownerDocument会使用新的HTMLDocument参考进行更新,但不会破坏和创建该元素.这意味着将不会调用constructor()方法.

仅当您的自定义元素将在多文档上下文中使用并且需要执行某些不应该在connectedCallback()中执行的特殊操作(例如与所有者文档,主文档,或其他元素.

示例：如果要在将元素添加到文档时显示特殊的交互作用,而不是在元素最初位于其中时显示特殊的交互作用,则不会在Constructor()或connectedCallback()中执行此操作,但可以在adaptedCallback中执行此操作().

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)
}

创建自定义元素时,其回调将按以下顺序调用：构造函数> connectedCallback

当您移动带有acceptNode()的自定义元素时,将按以下顺序调用回调：connectededCallback(源文档中设置ownerDocument)>采用回调(新文档中设置ownerDocument)> connectedCallback.

克隆带有importNode()的自定义元素时,将按以下顺序调用回调：构造函数> connectedCallback.

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

您可以在其他情况下处理多个文档,例如,通过HTML导入加载HTML文档时.

标签：web-component,custom-element,javascript
来源： https://codeday.me/bug/20191025/1926063.html