Nested OL from Shopify Editor

I am creating this page by inserting an Ordered List in the Shopify web-based editor, typing in a list of stuff, and then indenting/outdenting elements with the toolbar buttons (in that order). I have not done any manual HTML editing, other than to open the HTML editor to inspect the code.

1. Outermost level, element 1
1. Indent 1, element 1
2. Indent 1, element 2
3. Indent 1, element 3
1. Indent 2, element 1
2. Indent 2, element 2
1. Indent 3, element 1
2. Indent 3, element 2
3. Indent 3, element 3
2. Outermost, element 2
1. Indent 1, element 1
2. Indent 1, element 1

Done.

Shopify appears to create the indented items incorrectly. The nested elements are created after the closing </li> tag of the parent element, e.g.:

<li>Outermost level, element 1</li>
<ol>
<li>Indent 1, element 1</li>
<li>Indent 1, element 2</li>
<li>Indent 1, element 3</li>
<ol>
<li>Indent 2, element 1</li>

instead of before it. The Mozilla HTML guide shows that the closing </li> tag should enclose the entire nested <ol>, e.g.

<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag is not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>