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

Question

Let's say I have this HTML:

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

inner-element and outer-element are custom elements extended from LitElement.

Is there a prescribed order to include the files defining these elements into my script?

E.g.
A.

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

vs
B.

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

I've noticed that the order of inclusion determines the order that the elements are rendered. That is, A leads to render() being called on the inner and then the outer. Whereas B leads to render() being called on the outer and then the inner.

A live example, where you can switch the order and see the result in the console is provided here.

My (naive) intuition was that the render order would be determined by the structure of the HTML page. Instead, it appears to be determined by the order of Javascript includes. Which makes me want to know: Is an order that is considered correct?

Answer 1

From the HTML parser stand point, the order considered as correct should be the order of appearance of the elements (your intuition).

But from the Javascript execution viewpoint... it depends on the author and developer intentions.

---

Generally, unless you are both the author and user of the custom element, you cannot know whether a custom element is defined before or after it is parsed, nor the order in which 2 different elements are defined.

Therefore, as a web components author, you should try to develop custom elements whose rendering is not dependent the definition order (as much as possible). Otherwise make it clear in the documentation.

As a web components consumer/user, you should be aware (and you are aware) of the side effects of asynchronous download and deferred defintion of scripts and modules.