将 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';

vs
B.

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

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

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

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

Answer 1

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

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

---

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

因此，作为 Web 组件作者，您应该尝试开发其呈现不依赖于定义顺序的自定义元素（尽可能）。否则请在文档中明确说明。

作为 Web 组件消费者/用户，您应该知道（并且您知道）异步下载和延迟定义脚本和模块的副作用。