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


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>
<li>Indent 1, element 1</li>
<li>Indent 1, element 2</li>
<li>Indent 1, element 3</li>
<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.

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