How to internationalize a Thymeleaf nested list? - spring

Question

Let's say I have a basic static HTML page that contains a nested unordered list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 2.1</li>
<li>Sub-item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
That's valid XHTML. Great.
Now, I'm applying Thymeleaf's internationalization via th:text (if it matters, and I don't believe it does, this is inside a Spring application).
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
Assuming that I have my mypage.properties set up and working properly, once the above is processed by Thymeleaf, the result will display as:
<ul>
<li>Item 1</li>
<li>Item 2
</li>
<li>Item 3</li>
</ul>
Where did my sub-items go for Item 2, and how can I get them back while having them i18n'ed separately? I know about th:utext, but I do not want to have mypage.item2 contain the full HTML for the entire sublist. Is it possible?
Edit: It is possible to get what I'm looking for if I change my code to the following, but then it is no longer valid XHTML. I am looking for a valid XHTML solution.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2</li>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>

Answer 1

First for understanding: th:text change everything till the tag is closed, so the behavior is not a surprise.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><span th:text="#{mypage.item2}" th:remove="tag">Item 2</span>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
should work or with newer version you could use th:block
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><th:block th:text="#{mypage.item2}">Item 2</th:block>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
With th:inline it should be possible to avoid the extra node th:block.