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);