diff --git a/packages/quill/src/core/editor.ts b/packages/quill/src/core/editor.ts
index a19485840d..4b5a22ac8b 100644
--- a/packages/quill/src/core/editor.ts
+++ b/packages/quill/src/core/editor.ts
@@ -337,20 +337,27 @@ function convertListHTML(
   }
   const [{ child, offset, length, indent, type }, ...rest] = items;
   const [tag, attribute] = getListType(type);
+  // CLASSNAME FIX
+  const className =
+    (<HTMLLIElement>child.domNode).className != ''
+      ? ` class="${(<HTMLLIElement>child.domNode).className}"`
+      : '';
   if (indent > lastIndent) {
     types.push(type);
     if (indent === lastIndent + 1) {
-      return `<${tag}><li${attribute}>${convertHTML(
+      // CLASSNAME FIX
+      return `<${tag}><li${attribute}${className}>${convertHTML(
         child,
         offset,
         length,
       )}${convertListHTML(rest, indent, types)}`;
     }
-    return `<${tag}><li>${convertListHTML(items, lastIndent + 1, types)}`;
+    return `<${tag}><li${className}>${convertListHTML(items, lastIndent + 1, types)}`;
   }
   const previousType = types[types.length - 1];
   if (indent === lastIndent && type === previousType) {
-    return `</li><li${attribute}>${convertHTML(
+    // CLASSNAME FIX
+    return `</li><li${attribute}${className}>${convertHTML(
       child,
       offset,
       length,
diff --git a/packages/quill/test/unit/core/editor.spec.ts b/packages/quill/test/unit/core/editor.spec.ts
index 0c595332bb..b685415b67 100644
--- a/packages/quill/test/unit/core/editor.spec.ts
+++ b/packages/quill/test/unit/core/editor.spec.ts
@@ -1287,10 +1287,10 @@ describe('Editor', () => {
           <li>e</li>
           <li>Two
             <ul>
-              <li>Alpha
+              <li class="ql-indent-1">Alpha
                 <ol>
-                  <li>I</li>
-                  <li>II</li>
+                  <li class="ql-indent-2">I</li>
+                  <li class="ql-indent-2">II</li>
                 </ol>
               </li>
             </ul>
@@ -1318,10 +1318,10 @@ describe('Editor', () => {
           <li data-list="checked">e</li>
           <li data-list="checked">Two
             <ul>
-              <li data-list="unchecked">Alpha
+              <li class="ql-indent-1" data-list="unchecked">Alpha
                 <ul>
-                  <li data-list="checked">I</li>
-                  <li data-list="checked">II</li>
+                  <li class="ql-indent-2" data-list="checked">I</li>
+                  <li class="ql-indent-2" data-list="checked">II</li>
                 </ul>
               </li>
             </ul>
@@ -1343,16 +1343,17 @@ describe('Editor', () => {
         </ol>
         `,
       );
+      console.log(editor.getHTML(12, 12));
       expect(editor.getHTML(12, 12)).toEqualHTML(`
         <ol>
-          <li>
+          <li class="ql-indent-2">
             <ol>
-              <li>
+              <li class="ql-indent-2">
                 <ol>
-                  <li>II</li>
+                  <li class="ql-indent-2">II</li>
                 </ol>
               </li>
-              <li>BBBB</li>
+              <li class="ql-indent-1">BBBB</li>
             </ol>
           </li>
           <li>2222</li>