connectedCallback调用是否按确定性顺序执行

Question

如果我有2个Lit元素，具有父子关系，例如：

<x-parent>
<x-child></x-child>
</x-parent>

connectedCallback调用是否按确定性顺序执行？

在我的测试中，看起来总是首先调用父级的connectedCallback，但我不知道是否可以相信这种情况总是如此。

---

在@justin fagnani回答后更新

@justin fagnani不确定我们是否在谈论同样的问题，你写过组件何时被定义，但我的问题是关于连接回调的顺序。无论如何，根据您的回答，我认为如果使用<slot>:进行渲染，那么子回调首先发生

render() {
return html`<slot></slot>`;    
}

照明操场示例1，

但是，如果子级是用一个点亮的html模板呈现的，则父级回调首先发生：

render() {    
return html`<x-child></x-child>`;
}

照明操场示例2

我的假设正确吗？

Answer 1

确切的顺序取决于元素定义和升级的一些因素。

<x-parent>
<x-child></x-child>
</x-parent>

对于这个代码段，如果<x-parent>和<x-child>都是在创建HTML之前定义的，那么是的，顺序将是[<x-parent>, <x-child>]。

如果首先创建HTML，那么顺序将是定义组件的顺序。

首先，让我们假设组件定义在单独的模块中，并且不相互导入。

这里将首先定义父对象：

<x-parent>
<x-child></x-child>
</x-parent>
<script type=module>
import './parent.js';
import './child.js';
</script>

这里将首先定义子项：

<x-parent>
<x-child></x-child>
</x-parent>
<script type=module>
import './child.js';
import './parent.js';
</script>

如果其中一个组件定义导入另一个，则深度优先导入的组件将优先：

这里将首先定义子项：

parent.js:

import './child.js';

HTML:

<x-parent>
<x-child></x-child>
</x-parent>
<script type=module>
import './parent.js';
</script>

所以，如果您想要在所有情况下首先定义的保证，请让每个组件导入需要首先定义的组件。

Answer 2

connectedCallback：每次将自定义元素附加到文档连接的元素中时调用。每次移动节点时都会发生这种情况，并且可能在元素的内容被完全解析之前发生。

这相当于ngOnInit(Angular(和componentDidMount的(react(生命周期，

所以yes父方法将首先被调用。

参考：链接到mdn文档