polymer - WebComponents/Polymer - 树中的生命周期回调排序

Question

假设我有以下 html:

<my-element-one>
    <my-element-two>
        <my-element-three></my-element-three>
    </my-element-two>
</my-element-one>

现在，假设这被解析为 DocumentFragment。现在，我将片段插入到文档中。这些自定义元素的attachedCallbacks 将按什么顺序触发？他们会始终优先射击深度吗(三、二、一)？或者他们会从上到下开火(一、二、三)？还是完全没有定论？如果我稍后移除整个树， detachedCallbacks 将按什么顺序触发？

最后，这种行为在 polyfill 和 W3C 规范的预期行为之间是否一致？我已经阅读了一堆规范，但没有找到关于这种排序应该如何进行的明确解释。

Answer 1

尽管我假设您最初的问题是关于自定义元素的，但我已经使用 Polymer 整理了一个示例，该示例尝试复制您感兴趣的树排序:

http://jsbin.com/yisaqe/3/edit



在这种情况下，我们看到生命周期回调是从上到下(一、二、三)而不是深度优先(三、二、一)执行的:

如果稍后删除整个树，分离的回调将以从上到下的顺序执行(一、二、三 - 请参阅控制台)

http://jsbin.com/mejija/1/edit



我认为这在 polyfill 和规范的预期行为之间是一致的，但我无法从规范中确定这是否意味着不同。我希望至少这些概念证明是有用的。