connectedCallback 调用是否以确定的顺序执行？

如何解决connectedCallback 调用是否以确定的顺序执行？

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

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

connectedCallback 调用是否以确定的顺序执行？

在我的测试中看起来总是先调用父级的 connectedCallback，但我不知道我是否可以一直依赖这种情况。

---

在@justin-fagnani 回答后更新

@justin-fagnani 不确定我们是否在谈论相同的内容，您写的是何时定义组件，但我的问题是关于 connectedCallback 的顺序.无论如何，根据您的回答，我认为如果使用 <slot> 呈现子回调首先发生：

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

lit playground example 1,

但是如果孩子是用 lit-html 模板呈现的，则父回调首先发生：

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

lit playground example 2

我的假设是否正确？

解决方法

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

这相当于ngOnInit（Angular）和componentDidMount（反应）生命周期，

所以是的，父方法将首先被调用。

参考：Link to mdn docs

,

确切的顺序取决于元素定义和升级方面的一些事情。

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

对于此代码段，如果在创建 HTML 之前同时定义了 <x-parent> 和 <x-child>，那么是的，顺序将为 [<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>

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