create elements before connected

index.html

@@ -44,18 +44,36 @@ class FileGroup extends HTMLElement {
       }
     `
     this.shadowRoot.appendChild(style)
-    this.addNewFile()
-    this.addNewFile()
-    this.addNewFile()
+    if (this.contentEl.childNodes.length === 0) {
+      this.addFile()
+    }
   }
 
-  addNewFile() {
+  addFile({name, data} = {}) {
     const el = document.createElement('m-file-view')
+    if (el.name !== undefined) {
+      el.name = name
+    }
+    if (el.name !== undefined) {
+      el.data = data
+    }
     this.contentEl.appendChild(el)
   }
 }
 
 class FileView extends HTMLElement {
+  icons = {
+    menu: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+        <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+      </svg>
+    `,
+  }
+
+  text = {
+    delete: {en: 'Delete', es: 'Borrar'},
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -78,9 +96,25 @@ class FileView extends HTMLElement {
       div.header {
         display: flex;
         flex-direction: row;
+        align-items: stretch;
+        background-color: #111;
+        color: #ddd;
+        padding: 3px 0;
+      }
+      div.header > * {
+        background: inherit;
+        color: inherit;
+        border: none;
       }
       .name {
         flex-grow: 1;
+        padding: 0 5px;
+        font: inherit;
+        font-family: monospace;
+        outline: none;
+      }
+      div.header button svg {
+        margin-bottom: -3px;
       }
       div.content {
         display: flex;
@@ -94,6 +128,9 @@ class FileView extends HTMLElement {
     this.headerEl.appendChild(this.nameEl)
     this.editEl = document.createElement('m-text-edit')
     this.contentEl.appendChild(this.editEl)
+    this.menuEl = document.createElement('button')
+    this.menuEl.innerHTML = this.icons.menu
+    this.headerEl.appendChild(this.menuEl)
   }
 }
 
@@ -101,6 +138,16 @@ class TextEdit extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
+    const stackEl = document.createElement('div')
+    stackEl.classList.add('stack')
+    this.textEl = document.createElement('textarea')
+    this.textEl.classList.add('text')
+    this.textEl.rows = 1
+    stackEl.appendChild(this.textEl)
+    this.shadowRoot.appendChild(stackEl)
+    this.textEl.addEventListener('input', () => {
+      stackEl.dataset.copy = this.textEl.value
+    })
   }
 
   connectedCallback() {
@@ -119,28 +166,21 @@ class TextEdit extends HTMLElement {
       div.stack::after {
         content: attr(data-copy) " ";
         visibility: hidden;
-        resize: none;
         overflow: hidden;
       }
       div.stack::after, div.stack > textarea {
         white-space: pre-wrap;
-        border: 1px solid #444;
-        padding: 5px;
+        border: 1px solid #888;
+        padding: 3px;
         font: inherit;
         font-family: monospace;
         grid-area: 1 / 1 / 2 / 2;
+        min-height: 1em;
+        border-radius: 2px;
+        resize: none;
       }
     `
     this.shadowRoot.appendChild(style)
-    const stackEl = document.createElement('div')
-    stackEl.classList.add('stack')
-    this.textEl = document.createElement('textarea')
-    this.textEl.classList.add('text')
-    stackEl.appendChild(this.textEl)
-    this.shadowRoot.appendChild(stackEl)
-    this.textEl.addEventListener('input', () => {
-      stackEl.dataset.copy = this.textEl.value
-    })
   }
 }
 
@@ -148,6 +188,7 @@ customElements.define('m-file-group', FileGroup)
 customElements.define('m-file-view', FileView)
 customElements.define('m-text-edit', TextEdit)
 
+
 const fileGroup = document.createElement('m-file-group')
 document.body.appendChild(fileGroup)
 </script>