使用Lit渲染嵌套列表顺序错乱，求原因解析

核心原因是：Lit的html模板标签处理的是合法的DOM节点片段，而非字符串拼接，浏览器会自动补全不完整的DOM结构，导致渲染错乱。

具体分析 #

1. DOM解析规则限制
   浏览器在解析HTML时，要求每个节点必须是完整可独立解析的片段。当你单独传入html

   时，浏览器会自动补全闭合标签，直接生成`<ul></ul>`；而单独的`html`</ul>是无效的（没有对应的开标签），会被浏览器忽略。
   这就导致原本想嵌套在子<ul>里的<li>Sublist One等元素，直接被放到了父<ul>的顶层，和其他<li>同级。

   • Lit模板的工作逻辑
     Lit的模板系统基于原生<template>元素，它会先把html标签包裹的内容解析成DOM树，再进行渲染，不是简单把字符串拼接起来。

     • 第一种方案中，html
       ${sublst}
       ``是一个完整的<ul>节点，包含所有子<li>，DOM结构合法，所以嵌套渲染正常。
     • 第二种方案中，拆分的<ul>、</ul>被分别解析成独立的无效片段，破坏了原本的嵌套结构。

错误渲染结果验证 #

你看到的错乱结构：

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

正是浏览器自动补全不完整DOM后的结果——单独的<ul>被闭合，子<li>脱离了嵌套层级，最后的</ul>被浏览器错误地补成了空的<ul>。

总结 #

使用Lit模板时，必须保证每个html标签包裹的是合法、完整的DOM片段，不能拆分标签的开闭部分。嵌套结构要作为一个整体的模板对象传入，而不是拆分后逐个推入数组。

内容的提问来源于stack exchange，提问作者Asher Hoskins