主页 / user-2832632

Asher Hoskins's questions

Martin Hope
Asher Hoskins
Asked: 2025-04-28 19:12:21 +0800 CST
  • 6

我正在使用 Lit 渲染一个嵌套列表。如果我将列表元素推送到一个数组中，并将子列表推送为完整的 Lithtml模板对象，那么一切正常，我就可以用模板渲染嵌套列表了html`<ul>${myArray}</ul>` 。

但是，如果我将子列表作为它们各自的部分（<ul>，，<li>Sub-First...，</ul>）推送，那么 UL 元素似乎会按无序方式呈现<ul></ul><li>Sub-First。

完整的工作示例（假设您已经下载了 Lit 代码的副本lit-all.min.js）：

渲染列表.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>

渲染列表.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);

呈现如下：

浏览器截图

查看开发人员工具显示第二个列表呈现为：

<ul>
<li>One
<li>Two
<ul></ul>
<li>Sublist One
<li>Sublist Two
<li>Three
<ul>

显然我不太理解 Lit 使用模板的方式。为什么第二种解决方案不起作用？

javascript