WebComponents / Polymer - Streamlining Lifecycle Callbacks in Trees

Question

Let's say I have the following html:

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

Now let's say that this was parsed in a DocumentFragment. Now I insert the fragment into the document. In what order will the attached elements of these user elements be involved? Will they sequentially start the depth first (three, two, one)? Or will they shoot from top to bottom (one, two, three)? Or is it completely undefined? If I delete the whole tree later, in what order will the pending calls be disconnected?

Finally, is this behavior compatible between the polyfill and the intended behavior of the W3C spec? I read a bunch of specs and did not find a clear explanation of how this order should look.

Answer 1

Although I assume that your initial question is about user elements in general, I have put together an example using Polymer that tries to replicate the tree order you are interested in:

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

In this case, we see that lifecycle callbacks are executed from top to bottom (one, two, three), and not the depth first (three, two, one):

If you delete the whole tree later, separate callbacks will be similarly executed in the upper and lower order (one, two, three - see the console).

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

, polyfill spec, , . , .