javascript - 关于自定义 Web 组件和生命周期回调的说明

Question

我希望得到一些与自定义元素及其生命周期回调相关的澄清:

1. 我对元素创建的回调有一些困惑。该规范说:“在创建元素的每个实例时调用。”根据我的想法，实例在创建后立即“虚拟”插入到 dom 中，因此在文档流中本质上背靠背执行这两个回调的好处是。我还在网上读到，创建的回调与定义的元素关系更密切。以下哪种情况是规范所规定的。

2. 这可能与上一个问题类似:我看到将自定义元素放入文档的 3 种方法:

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

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

   3. 我能想到的最后一个方法涉及到 Shadow dom，以及元素一半在文档中一半在文档外的感觉。

感谢您的阅读，如果您能够提供任何澄清和启发，我将不胜感激。

Answer 1

我可以为你回答1和2.2。

[注意:这适用于 native 实现，而不是聚合物]

首先，创建的回调在声明中使用。 当您创建元素时会调用它。 所以当你这样做时

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

在调用下一行代码之前调用createdCallback。

当你表演时

document.body.appendChild(myElement);

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

现在，与我在自定义元素测试中注意到的情况相比，shadowDom 及其 css 可能会延迟一些。