Lit, выведен вложенные списки из порядка? ⇐ Javascript

[Anonymous]

Я использую Lit, чтобы отобразить вложенный список. Если я подтолкну свои элементы списка в массив с подсюзами, выдвинутыми как полные Lit Html шаблонные объекты, тогда все хорошо, я могу составить вложенный список с шаблоном html`

• $ {myarray}

`.

Код: Выделить всё

[list]

, sub-first , ..., [/list] ), затем элементы UL, кажется, выводятся из порядка как

sub-first .
Полный рабочий пример (предполагая, что у вас есть копия Lit-all-all.min. />render-list.html

Код: Выделить всё

render-list.js>

Код: Выделить всё

import {LitElement, html} from "./lit-all.min.js";

export class RenderList extends LitElement {
static properties = {
type: {type: Number}
};

constructor() {
super();
this.type = 0;
}

render() {
if (this.type == 1) {
let lst = [];
lst.push(html`One`);
lst.push(html`Two`);
let sublst = [];
sublst.push(html`Sublist One`);
sublst.push(html`Sublist Two`);
lst.push(html`[list]${sublst}[/list]`);
lst.push(html`Three`);
return html`
This list rendering works
[list]${lst}[/list]
`;
}
else {
let lst = [];
lst.push(html`One`);
lst.push(html`Two`);
lst.push(html`[list]`);
lst.push(html`Sublist One`);
lst.push(html`Sublist Two`);
lst.push(html`[/list]`);
lst.push(html`Three`);
return html`
This list rendering doesn't work
[list]${lst}[/list]
`;
}
}
}
customElements.define("render-list", RenderList);

Это отображается ниже:

и смотрю в инструментах разработчика. class = "lang-html prettyprint-override">

• One
  Two

Sublist One
Sublist Two
Three

< /code>
Очевидно, что я не понимаю ничего о том, как Lit использует шаблоны здесь. Почему не работает второе решение?

Подробнее здесь: https://stackoverflow.com/questions/795 ... t-of-order