use custom elements throughout

assets/main.js

@@ -1,12 +1,33 @@
+class LineRemover extends HTMLButtonElement {
+  constructor() {
+    super();
+    this.container = this.closest("div.linecontainer").parentElement;
+    this.addEventListener("click", (e) => {
+      this.container.remove();
+    });
+  }
+}
+
+customElements.define("line-remover", LineRemover, { extends: "button" });
+
+class LineAdder extends HTMLButtonElement {
+  constructor() {
+    super();
+    this.addEventListener("click", (e) => {
+      document.querySelector("div[is=lines-div]").add()
+    });
+  }
+}
+
+customElements.define("line-adder", LineAdder, { extends: "button" });
+
 class PoemLine extends HTMLDivElement {
   constructor() {
     super();
     const ltp = document.querySelector("#linetmpl");
     var l = ltp.content.cloneNode(true);
     this.appendChild(l);
-    this.addEventListener("regen", function() {
-      console.log("poot");
-    });
+    this.addEventListener("regen", this.regen); // TODO will this be bound?
   }
 
   regen() {
@@ -23,18 +44,22 @@ class PoemLine extends HTMLDivElement {
 }
 
 customElements.define("poem-line", PoemLine, { extends: "div" });
+
 const regen = new Event("regen");
 
-function addLine() {
-  var ld = document.createElement("div", { is: "poem-line" });
-  document.querySelector("#lines").append(ld);
-  ld.regen();
-}
-
-function main() {
+class Lines extends HTMLDivElement {
+  constructor() {
+    super();
     for (var i = 0; i < 10; i++) {
-    addLine();
+      this.add();
+    }
+  }
+
+  add() {
+    var ld = document.createElement("div", { is: "poem-line" });
+    this.append(ld);
+    ld.regen();
   }
 }
 
-main();
+customElements.define("lines-div", Lines, { extends: "div" });

templates/index.tmpl

@@ -12,16 +12,17 @@
     <template id="linetmpl">
       <div class="linecontainer unpinned" hx-trigger="regen from:body" hx-swap="outerHTML" hx-get="/line">
         <span class="linecontrols">
-          <button class="pin">pin</button>
-          <button class"edit">edit</button>
-          <button class="moveup">up</button>
-          <button class="movedown">down</button>
-          <button class="remove">remove</button>
+          <button >pin</button>
+          <button >edit</button>
+          <button >up</button>
+          <button >down</button>
+          <button is="line-remover">remove</button>
         </span>
         <span class="linetext"></span>
       </div>
     </template>
     <h1>Trunkless</h1>
+    <script src="/main.js"></script>
     <div id="pagecontrols">
       <a href="/about">about</a>
       <a id="togglescheme" href="/#togglescheme">light|dark</a>
@@ -34,11 +35,10 @@
     <p id="dna">
       todo, dna display
     </p>
-    <div id="lines"></div>
+    <div is="lines-div"></div>
     <div>
-      <button>add</button>
+      <button is="line-adder">add</button>
     </div>
-    <script src="/main.js"></script>
   </body>
 </html>