| class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .navbar { | |
| background-color: white; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .nav-link { | |
| color: #4b5563; | |
| padding: 0.5rem 1rem; | |
| } | |
| .nav-link:hover { | |
| color: #1f2937; | |
| background-color: #f3f4f6; | |
| border-radius: 0.375rem; | |
| } | |
| </style> | |
| <nav class="navbar py-3 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <a href="/" class="text-lg font-medium text-gray-800">Simple UI</a> | |
| <div class="hidden md:flex space-x-2"> | |
| <a href="/" class="nav-link">Home</a> | |
| <a href="#" class="nav-link">About</a> | |
| <a href="#" class="nav-link">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |