Estou usando Lit para renderizar uma lista aninhada. Se eu inserir os elementos da minha lista em um array com as sublistas inseridas como htmlobjetos de modelo Lit completos, tudo ficará bem. Posso renderizar a lista aninhada com o modelo html`<ul>${myArray}</ul>` .
Entretanto, se eu, em vez disso, enviar sublistas como suas partes individuais ( <ul>, <li>Sub-First, ..., </ul>), os elementos UL parecem ser renderizados fora de ordem como <ul></ul><li>Sub-First.
Exemplo de trabalho completo (assumindo que você tenha uma cópia do código Lit conforme lit-all.min.jsbaixado):
render-list.html
<!DOCTYPE html>
<html>
<head>
<script type="module" src="render-list.js"></script>
</head>
<body>
<render-list type="1"></render-list>
<render-list type="2"></render-list>
</body>
</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`<li>One`);
lst.push(html`<li>Two`);
let sublst = [];
sublst.push(html`<li>Sublist One`);
sublst.push(html`<li>Sublist Two`);
lst.push(html`<ul>${sublst}</ul>`);
lst.push(html`<li>Three`);
return html`
<h1>This list rendering works</h1>
<ul>${lst}</ul>
`;
}
else {
let lst = [];
lst.push(html`<li>One`);
lst.push(html`<li>Two`);
lst.push(html`<ul>`);
lst.push(html`<li>Sublist One`);
lst.push(html`<li>Sublist Two`);
lst.push(html`</ul>`);
lst.push(html`<li>Three`);
return html`
<h1>This list rendering doesn't work</h1>
<ul>${lst}</ul>
`;
}
}
}
customElements.define("render-list", RenderList);
Isso resulta no seguinte:
E olhando nas ferramentas do desenvolvedor aparece a segunda lista renderizada como:
<ul>
<li>One
<li>Two
<ul></ul>
<li>Sublist One
<li>Sublist Two
<li>Three
<ul>
Claramente não estou entendendo algo sobre a maneira como o Lit usa modelos aqui. Por que a segunda solução não funciona?