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

Question

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

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

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

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

@justin-fagnani 回答后更新

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

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

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

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

我的假设正确吗？

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

<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>

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

这里首先定义孩子：

父.js：

import './child.js';

HTML：

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

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

2 回答 2