WebComponents / Polymer – 生命周期回调在树中排序

2019年8月4日 177次阅读

假设我有以下html：

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

现在,让我们说这被解析为DocumentFragment.现在,我将片段插入到Document中.这些自定义元素的附加回调会触发什么顺序？他们会不会一直开火(三,二,一)？或者它们会从上到下(一,二,三)发射？还是完全未确定？如果我稍后删除整个树,detachedCallbacks会触发什么顺序？

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

最佳答案 虽然我假设您的原始问题一般是关于自定义元素,但我已经使用Polymer编写了一个示例,它尝试复制您感兴趣的树顺序：

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

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

如果稍后删除整个树,则分离的回调类似地以从上到下的顺序执行(一,二,三 – 请参阅控制台)

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

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

点赞