Improve web component example

tshemsedinov · tshemsedinov · commit 9f03244263e0 · 2020-03-03T13:20:34.000+02:00
diff --git a/JavaScript/3-abstraction.html b/JavaScript/3-abstraction.html
@@ -9,10 +9,19 @@
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this.clicked = false;
   }
 
   connectedCallback() {
-    this.shadowRoot.innerHTML = `<h1>${this.getAttribute('name')}</h1>`;
+    const html = `<h1>Marcus</h1><button type="button">Ave Marcus!</button>`;
+    this.shadowRoot.innerHTML = html;
+    this.shadowRoot.querySelector('button').addEventListener('click', () => {
+      if (!this.clicked) {
+        this.clicked = true;
+        const html = `<h1>Ave Marcus Aurelius!</h1>`;
+        this.shadowRoot.innerHTML = html;
+      }
+    });
   }
 }
 
@@ -21,6 +30,6 @@
     </script>
   </head>
   <body>
-    <page-caption name="Marcus">Marcus Aurelius</page-caption>
+    <page-caption></page-caption>
   </body>
 </html>
