将 lit-elements 包含到我的脚本中的正确顺序是什么？

Question

假设我有这个 HTML:

<outer-element>
  <inner-element></inner-element>
</outer-element>

inner-element 和 outer-element 是从 LitElement 扩展的自定义元素。

是否有规定的顺序将定义这些元素的文件包含到我的脚本中？

例如
A.

import './inner-element.js';
import './outer-element.js';

对
B.

import './outer-element.js';
import './inner-element.js';

我注意到包含的顺序决定了元素呈现的顺序。也就是说，A 导致 render() 在内部调用，然后在外部调用。而 B 导致 render() 在外部被调用，然后在内部被调用。

提供了一个实例，您可以在其中切换顺序并在控制台中查看结果here。

我的（天真的）直觉是呈现顺序将由 HTML 页面的结构决定。相反，它似乎是由 Javascript 包含的顺序决定的。这让我想知道：一个顺序被认为是正确的吗？

Answer 1

从HTML解析器的角度来看，正确的顺序应该是元素出现的顺序（你的直觉）。

但是从Javascript执行的角度来看...这取决于作者和开发者的意图。

一般情况下，除非您既是自定义元素的作者又是用户，否则您无法知道自定义元素是在解析之前还是之后定义的，也不知道2个不同元素的定义顺序。

因此，作为网络组件作者，您应该尝试开发渲染不依赖于定义顺序的自定义元素（尽可能多）。否则在文档中说清楚。

作为 Web 组件 consumer/user，您应该了解（并且您已经了解）异步下载和延迟定义脚本和模块的副作用。

What is the correct order to include lit-elements into my script?