import { defineCustomElement } from 'vue';
import UserMenuElement from './components/UserMenu.ce.vue';
import './style.css';

const TAG_NAME = 'user-menu';

export function registerWebComponents(): void {
  if (!customElements.get(TAG_NAME)) {
    customElements.define(
      TAG_NAME,
      defineCustomElement(UserMenuElement, {
        // Tailwind is generated as global CSS; without Shadow DOM
        // utility classes apply correctly inside the custom element.
        shadowRoot: false,
      }),
    );
  }
}

registerWebComponents();
