music-player/client/src/blocks/track.ts

@@ -1,17 +1,35 @@
 import { TrackInfo } from "../client";
 
-export class TitleText extends HTMLElement {
+export class TrackName extends HTMLElement {
-  title: string;
+  container: HTMLElement;
 
-  constructor(title: string) {
+  static get observedAttributes() {
+    return ["name"];
+  }
+
+  constructor() {
     super();
-    this.title = title;
+    this.container = document.createElement("div");
+  }
+
+  get name(): string | null {
+    return this.getAttribute("name");
+  }
+
+  set name(name: string | null) {
+    while (this.container.lastChild) {
+      this.container.removeChild(this.container.lastChild);
+    }
+    if (name) {
+      this.setAttribute("name", name);
+      this.container.appendChild(document.createTextNode(name));
+    } else {
+      this.removeAttribute("name");
+    }
   }
 
   connectedCallback() {
-    const container = document.createElement("div");
+    this.appendChild(this.container);
-    container.appendChild(document.createTextNode(this.title));
-    this.appendChild(container);
   }
 }
 
@@ -97,7 +115,15 @@ export class TrackCard extends HTMLElement {
 
     this.appendChild(container);
 
-    this["name"] && container.appendChild(new TitleText(this.name));
+    while (container.lastChild) {
+      container.removeChild(container.lastChild);
+    }
+
+    if (this["name"]) {
+      const trackName = document.createElement("track-name");
+      trackName.name = this["name"];
+      container.appendChild(trackName);
+    }
     this["length"] && container.appendChild(document.createTextNode("1:23"));
     this["album"] &&
       container.appendChild(document.createTextNode("Shatter Me"));

music-player/client/src/main.ts

@@ -1,12 +1,13 @@
 import * as _ from "lodash";
 import { TrackInfo, getTracks } from "./client";
-import { TitleText, TrackCard } from "./blocks/track";
+import { TrackName, TrackCard } from "./blocks/track";
 
-window.customElements.define("title-text", TitleText);
+window.customElements.define("track-name", TrackName);
 window.customElements.define("track-card", TrackCard);
 
 declare global {
   interface HTMLElementTagNameMap {
+    "track-name": TrackName;
     "track-card": TrackCard;
   }
 }