WebComponents/Polymer - Lifecycle Callback Ordering 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 this was parsed into a DocumentFragment. Now, I then insert the fragment into the Document. What order will the attachedCallbacks of these custom elements fire? Will they consistently fire depth first (three, two, one)? Or will they fire from top to bottom (one, two, three)? Or is it entirely undetermined? If I remove the entire tree later, what order will the detachedCallbacks fire?

Finally, is this behavior consistent between the polyfill and the W3C spec's intended behavior? I've read through a bunch of the spec and haven't found a clear explanation on how this ordering should play out.

Answer 1

Although I assume your original question is about Custom Elements in general, I've put together an example using Polymer which tries to replicate the tree ordering you're interested in:

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

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

If you remove the entire tree later on, the detached callbacks are similarly executed in a top to bottom order (one, two, three - see console)

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

I assume that this is consistent between the polyfill and the spec's intended behaviour, but I haven't been able to ascertain from the spec whether this is meant to differ. I hope that at least these proof of concepts are useful.