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

Question

假设我有以下 html：

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

现在，假设这被解析为 DocumentFragment。现在，我将片段插入到文档中。这些自定义元素的 attachCallbacks 会按什么顺序触发？他们会始终先开火（三、二、一）吗？还是他们会从上到下（一、二、三）开火？还是完全不确定？如果我稍后删除整个树，detachedCallbacks 会按什么顺序触发？

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

Answer 1

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

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

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

如果您稍后删除整个树，则分离的回调类似地以从上到下的顺序执行（一、二、三 - 见控制台）

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

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