Abortive attempt to set up a trivial web application

2025-02-17 16:19:33 -05:00 · 2025-02-17 16:19:33 -05:00 · fb2fcf4d36
commit fb2fcf4d36
parent a1dc573fc5
2 changed files with 32 additions and 0 deletions
--- a/visions/ui/index.html
+++ b/visions/ui/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head> <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title> My first web component with typescript </title>
+    </head>
+    <body>
+        <app-component name="TypeScript"></app-component>
+        <script type="module" src="./dist/app-component.js"></script>
+    </body>
+</html>
--- a/visions/ui/src/app-component.ts
+++ b/visions/ui/src/app-component.ts
@ -0,0 +1,21 @@
+import {html, css, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+export class SimpleGreeting extends LitElement {
+  static styles = css`p { color: blue }`;
+  name: String;
+
+  static properties = {
+      name: { type: String }
+  };
+
+  constructor() {
+      super();
+      this.name = 'Somebody';
+  }
+
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+