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

Question

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

我对元素创建的回调有些困惑。规范说类似：“在创建元素的每个实例时调用。” 在我看来，一个实例在创建后立即“虚拟地”插入到 dom 中，因此这两个回调在文档流中基本上是背靠背的。我还在网上读到，创建的回调与定义的元素更密切相关。这些案例中的哪一个是规范所说的。
这可能与上一个问题的思路一致：我看到自定义元素的 3 种方式使其成为文档：
1. 它从一开始就是文档的一部分。在这种情况下，关于 document.readyState 事件，定义何时注册？
2. 它是通过 javascript 插入的。我假设程序员会在创建和插入之前注册定义。然后，问题是：创建的回调什么时候触发？附加的回调何时触发？最后，如果我在插入元素时设置其他元素与我的元素交互，我什么时候可以确定该工作已完成？
3. 我能想到的最后一种方法与 shadow dom 相关，以及元素在文档中一半进一半出的感觉。

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

score 2 · Accepted Answer

我可以为你回答 1 和 2.2。

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

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

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

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

当你表演

document.body.appendChild(myElement);

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

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

1 回答 1