澄清自定义Web组件和生命周期回调 [英] Clarification on custom web components and lifecycle callbacks

问题描述

我希望得到一些澄清，因为它涉及到自定义元素及其生命周期回调：

1. 我有一些混淆与元素创建回调。规范说的是这样的：创建元素的每个实例时调用。根据我的想法，一个实例在被创建之后就被虚拟插入到dom中，因此将这两个回调基本上背靠在文档流中的好处。我还在网上读到，创建的回调与元素变得更加紧密相关。这些情况是规范说的。

这可能与上一个问题一致：我看到3种自定义元素的方式一份文件：





1. 它是从一开始就是文件的一部分。在这种情况下，与document.readyState事件有关，定义何时会被注册？




2. 它是通过javascript插入的。我假定程序员将在创建和插入之前注册定义。然后，问题是：创建的回调函数何时激发？附加的回调何时触发？最后，如果我在插入元素时设置其他元素以与元素进行交互，那么我何时可以确定该元素已完成？

最后一种方法I可以考虑与影子相关，以及元素在文档中有一半半的意义。



感谢您的阅读，我希望您能提供任何澄清和建议。

解决方案

我可以回答1和2.2。





[注意：这是针对本机实现的NOT聚合物]





首先创建的回调用于声明中。
它在创建元素时被调用。
所以当你做的时候



  var myElement = document.createElement（custom-element）; 
  

在调用下一行代码之前，createdCallback被称为。





执行



  document.body.appendChild（myElement）; 
  

在调用下一行代码之前，attachedCallback被称为。





现在，shadowDom及其css可能会比我在测试自定义元素时注意到的要稍微延迟一些。




I was hoping to get some clarification as it relates to custom elements and their lifecycle callbacks:

1. I have some confusion with the element created callback. The spec says something like: "called when each instance of an element is created." to my thinking, an instance is inserted into the dom 'virtually' right after it is created, and so the benefit of having these two callback essentially back to back in the document flow. I have also read online that the created callback is more closely related to the element becoming defined. Which of these cases is what the spec says.

2. This is probably along the lines of the previous question: I see 3 ways of a custom element making it into a document:

   1. It is part of the document from the beginning. In this case, in relation to the document.readyState events, when will the definition be registered?

   2. It is inserted via javascript. I assume that the programmer will register the definition prior to creation and insertion. Then, the question is: when does the created callback fire? When does the attached callback fire? Lastly, if I setup other elements to interact with my element when it is inserted, when can I be sure that that work is finished?

   3. The last method I can think of relates to the shadow dom, and the sense that an element is somewhat half in and half out of the document.

Thank you for reading, I would appreciate any clarification and edification you might be able to provide.

解决方案

I can answer 1 and 2.2 for you.

[Note: this is for the native implementation NOT polymer]

First of all created callback is used in declaration. It is called when you create the element. so when you do

var myElement = document.createElement("custom-element");

The createdCallback is called before the next line of code is called.

When you perform

document.body.appendChild(myElement);

The attachedCallback is called before the next line of code is called.

Now the shadowDom and its css can be a bit more delayed from what I have noticed in my testing of custom elements.

这篇关于澄清自定义Web组件和生命周期回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！