custom-element - 将 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()在外部被调用，然后在内部被调用。

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

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

score 1 · Accepted Answer

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

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

通常，除非您是自定义元素的作者和用户，否则您无法知道自定义元素是在解析之前还是之后定义的，也不知道定义两个不同元素的顺序。

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

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

1 回答 1