add quick-start sample as demo page

2023-11-17 23:43:49 +01:00 · 2023-11-17 23:43:49 +01:00 · 53817036d9
commit 53817036d9
parent a388ea7dc9
1 changed files with 28 additions and 0 deletions
--- a/demo/sample.html
+++ b/demo/sample.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WC Base Test</title>
+    <script type="module">
+      import WebComponent from "https://unpkg.com/web-component-base/index.js";
+      class HelloWorld extends WebComponent {
+        static properties = ["data-name"];
+
+        get template() {
+          return `<h1>Hello ${this.props.dataName ?? "World"}!</h1>`;
+        }
+      }
+      customElements.define("hello-world", HelloWorld);
+    </script>
+  </head>
+  <body>
+    <hello-world data-name="Ayo"></hello-world>
+    <script>
+      const helloWorld = document.querySelector("hello-world");
+      setTimeout(() => {
+        helloWorld.setAttribute("data-name", "Ayo zzzZzzz");
+      }, 2500);
+    </script>
+  </body>
+</html>