details: refactoring to use divs instead of semantic markup

docs/src/demos/Experiments/Details/index.vue

@@ -5,6 +5,16 @@
     </button>
 
     <editor-content :editor="editor" />
+
+    <h2>HTML</h2>
+    {{ editor.getHTML() }}
+
+    <h2>Issues</h2>
+    <ul>
+      <li>Commands don’t work</li>
+      <li>Fails to open nested details</li>
+      <li>Node can’t be deleted (if it’s the last node)</li>
+    </ul>
   </div>
 </template>
 
@@ -60,16 +70,29 @@ export default {
     margin-top: 0.75em;
   }
 
-  details {
-    summary::before {
+  details,
+  [data-type="details"] {
+    display: flex;
+
+    [data-type="detailsContent"] > *:not(summary) {
+      display: none;
+    }
+
+    [data-type="detailsToggle"]::before {
+      cursor: pointer;
       content: '▸';
-      color: red;
       display: inline-block;
       width: 1em;
     }
 
-    &[open] summary::before {
-      content: '▾';
+    &[open] {
+      [data-type="detailsContent"] > *:not(summary) {
+        display: inherit;
+      }
+
+      [data-type="detailsToggle"]::before {
+        content: '▾';
+      }
     }
   }
 }