Fix semantic HTML for better embedding

src/AnimatedListDemo.tsx

@@ -82,44 +82,45 @@ export const AnimatedListDemo = () => {
     useAnimatedListItems({ keys: items });
 
   return (
-    <main>
+    <>
-      <button
+      <div className="buttons">
-        type="button"
+        <button
-        onClick={() => {
+          type="button"
-          updateItemPositions();
+          onClick={() => {
-          mutateItems('reverse');
+            updateItemPositions();
-        }}
+            mutateItems('reverse');
-      >
+          }}
-        Reverse
+        >
-      </button>
+          Reverse
-      <button
+        </button>
-        type="button"
+        <button
-        onClick={() => {
+          type="button"
-          updateItemPositions();
+          onClick={() => {
-          mutateItems('randomize');
+            updateItemPositions();
-        }}
+            mutateItems('randomize');
-      >
+          }}
-        Randomize
+        >
-      </button>
+          Randomize
-      <button
+        </button>
-        type="button"
+        <button
-        onClick={() => {
+          type="button"
-          updateItemPositions();
+          onClick={() => {
-          mutateItems('insert');
+            updateItemPositions();
-        }}
+            mutateItems('insert');
-      >
+          }}
-        Insert
+        >
-      </button>
+          Insert
-      <button
+        </button>
-        type="button"
+        <button
-        onClick={() => {
+          type="button"
-          updateItemPositions();
+          onClick={() => {
-          mutateItems('remove');
+            updateItemPositions();
-        }}
+            mutateItems('remove');
-      >
+          }}
-        Remove
+        >
-      </button>
+          Remove
-
+        </button>
+      </div>
       <ol>
         {items.map((item) => {
           return (
@@ -133,6 +134,6 @@ export const AnimatedListDemo = () => {
           );
         })}
       </ol>
-    </main>
+    </>
   );
 };

src/index.tsx

@@ -10,7 +10,7 @@ class AnimatedListComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    const rootNode = document.createElement('main');
+    const rootNode = document.createElement('section');
     this.appendChild(rootNode);
     this.root = createRoot(rootNode);
     this.root.render(<AnimatedListDemo />);