components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    @apply border-b border-gray-800 bg-gray-900;
                }
                .header-content {
                    @apply container mx-auto px-4 py-6 text-center;
                }
                h1 {
                    @apply text-3xl font-bold text-white mb-2;
                }
                p {
                    @apply text-gray-400;
                }
            </style>
            <header>
                <div class="header-content">
                    <h1>Solar Panel Showdown</h1>
                    <p>Compare photovoltaic modules from leading manufacturers</p>
                </div>
            </header>
        `;
    }
}
customElements.define('custom-header', CustomHeader);