demo

src/index.ts

@@ -0,0 +1,65 @@
+class AppElement extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host {
+            display: block;
+            font-family: Arial, sans-serif;
+            padding: 16px;
+            background-color: #f0f0f0;
+          }
+          h1 {
+            color: #333;
+          }
+        </style>
+        <h1>Hello, World!</h1>
+        <p>Welcome to the AppElement custom web component.</p>
+      `;
+    }
+  }
+}
+
+customElements.define('app-element', AppElement);
+
+class AiShowDemo extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host {
+            display: block;
+            font-family: Arial, sans-serif;
+            padding: 16px;
+            background-color: #e0f7fa;
+          }
+          h2 {
+            color: #00796b;
+          }
+        </style>
+        <h2>AI Show Demo</h2>
+        <p>This is a demo of the AiShowDemo custom web component.</p>
+      `;
+    }
+  }
+}
+
+customElements.define('ai-show-demo', AiShowDemo);