WebComponents: Use lit-html for templating.

Change-Id: Ic2fac595c5fc0275a4859d8c8bf470c77907be19

1 files changed, 3 insertions, 4 deletions

diff --git a/src/main/resources/META-INF/resources/admin/AdminElement.js b/src/main/resources/META-INF/resources/admin/AdminElement.js
index 8398d55..7c4e8e8 100644
--- a/src/main/resources/META-INF/resources/admin/AdminElement.js
+++ b/src/main/resources/META-INF/resources/admin/AdminElement.js
@@ -27,12 +27,11 @@ export class AdminElement extends HTMLElement {
     render() {
         let greetee = this.getAttribute("greetee");
 
-        const template = `
-            <p>Hello ${greetee}! <button id="switch">Switch</button></p>
+        const template = html`
+            <p>Hello ${greetee}! <button @click=${this.onSwitchClicked}>Switch</button></p>
             `;
 
-        this.shadowRoot.innerHTML = template;
-        this.shadowRoot.querySelector('#switch').addEventListener('click', this.onSwitchClicked);
+        render(template, this.shadowRoot);
     }
 }