Add web component example.

goloroden · goloroden · commit 904fb85b2aad · 2025-12-05T12:41:25.000+01:00
diff --git a/ui/index.css b/ui/index.css
@@ -0,0 +1,3 @@
+:root {
+  --highlight-color: #dd0099;
+}
diff --git a/ui/index.html b/ui/index.html
@@ -3,10 +3,11 @@
   <head>
     <title>tech:lounge Todo App</title>
 
+    <link type="text/css" rel="stylesheet" href="index.css">
     <script src="dist/index.js" type="module"></script>
   </head>
 
   <body>
-    <h1>Hallo Welt!</h1>
+    <tl-header year="2026"></tl-header>
   </body>
 </html>
diff --git a/ui/src/components/Header.ts b/ui/src/components/Header.ts
@@ -0,0 +1,36 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('tl-header')
+class Header extends LitElement {
+  static styles = css`
+    header {
+      padding: 16px;
+      text-align: center;
+    }
+
+    h1 {
+      font-family: sans-serif;
+      font-size: 36px;
+      font-weight: 400;
+      color: var(--highlight-color);
+    }
+
+    @media (max-width: 600px) {
+      h1 {
+        font-size: 24px;
+      }
+    }
+  `;
+
+  @property({ type: String })
+  year = '';
+
+  render() {
+    return html`
+      <header>
+        <h1>tech:lounge Masterclass ${this.year}</h1>
+      </header>
+    `;
+  }
+}
diff --git a/ui/src/index.ts b/ui/src/index.ts
@@ -1 +1 @@
-console.log('Hallo aus JavaScript!');
+import './components/Header.ts';
diff --git a/ui/ui.go b/ui/ui.go
@@ -4,4 +4,5 @@ import "embed"
 
 //go:embed dist/*
 //go:embed index.html
+//go:embed index.css
 var Content embed.FS

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:root {`
	`2`	`+ --highlight-color: #dd0099;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-console.log('Hallo aus JavaScript!');`
	`1`	`+import './components/Header.ts';`