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

Question

我希望得到一些关于自定义元素及其生命周期回调的说明:

1. 我对元素创建的回调有些困惑。规范是这样说的:“在创建元素的每个实例时调用。”在我看来，一个实例在创建后立即“虚拟地”插入到 dom 中，因此这两个回调的好处基本上是在文档流中背靠背。我还在网上读到，创建的回调与定义的元素更密切相关。以下哪种情况符合规范的规定。

2. 这可能与上一个问题的思路相同:我看到自定义元素有 3 种方式将其放入文档中:

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

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

   3. 我能想到的最后一个方法与 shadow dom 以及元素在文档中一半在文档之外的感觉有关。

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

Answer 1

我可以为你回答1和2.2。

[注意:这是针对原生实现而非聚合物]

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

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

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

当你表演时

document.body.appendChild(myElement);

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

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