Move CustomElement.define call to Astro layout in all existing web components, use defineCustomElement helper method consistently

Author: webstackdev

src/components/CallToAction/Newsletter/client/__tests__/index.spec.ts

@@ -16,7 +16,7 @@ describe('NewsletterFormElement web component', () => {
   let container: AstroContainer
   let newsletterElement: NewsletterFormElementInstance
   let windowInstance: Window
-  let NewsletterFormElementCtor: NewsletterClientModule['NewsletterFormElement'] | undefined
+  let registerNewsletterFormWebComponent: NewsletterClientModule['registerNewsletterFormWebComponent'] | undefined
   let fetchMock: ReturnType<typeof vi.fn>
 
   const defineGlobalProperty = (key: string, value: unknown) => {
@@ -56,7 +56,11 @@ describe('NewsletterFormElement web component', () => {
   beforeAll(async () => {
     windowInstance = new Window()
     applyWindowGlobals(windowInstance)
-    ;({ NewsletterFormElement: NewsletterFormElementCtor } = await import('@components/CallToAction/Newsletter/client'))
+    const clientModule = await import('@components/CallToAction/Newsletter/client')
+    registerNewsletterFormWebComponent = clientModule.registerNewsletterFormWebComponent
+    if (!registerNewsletterFormWebComponent) {
+      throw new Error('registerNewsletterFormWebComponent is unavailable')
+    }
   })
 
   beforeEach(async () => {
@@ -67,23 +71,19 @@ describe('NewsletterFormElement web component', () => {
     const html = await container.renderToString(NewsletterFixture)
     const domParser = new windowInstance.DOMParser()
     const doc = domParser.parseFromString(html, 'text/html')
+
+    if (!registerNewsletterFormWebComponent) {
+      throw new Error('registerNewsletterFormWebComponent did not initialize')
+    }
+
+    registerNewsletterFormWebComponent()
     windowInstance.document.body.innerHTML = doc.body?.innerHTML ?? ''
 
     const root = windowInstance.document.querySelector('newsletter-form') as NewsletterFormElementInstance | null
     if (!root) {
       throw new Error('Failed to locate <newsletter-form> in rendered fixture')
     }
 
-    if (!windowInstance.customElements.get('newsletter-form')) {
-      if (!NewsletterFormElementCtor) {
-        throw new Error('NewsletterFormElement failed to load before tests executed')
-      }
-      windowInstance.customElements.define(
-        'newsletter-form',
-        NewsletterFormElementCtor as unknown as CustomElementConstructor
-      )
-    }
-
     newsletterElement = root
     newsletterElement.initialize()
   })

src/components/CallToAction/Newsletter/client/index.ts

@@ -8,6 +8,7 @@ import { LitElement } from 'lit'
 import { addScriptBreadcrumb, ClientScriptError } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { getNewsletterElements } from './selectors'
+import { defineCustomElement } from '@components/scripts/utils'
 
 /**
  * Newsletter Form Custom Element (Lit-based)
@@ -44,11 +45,18 @@ export class NewsletterFormElement extends LitElement {
     const context = { scriptName: 'NewsletterFormElement', operation: 'connectedCallback' }
     addScriptBreadcrumb(context)
 
-    // Wait for DOM to be ready before initializing
+    const scheduleInitialization = () => {
+      queueMicrotask(() => this.initialize())
+    }
+
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => this.initialize())
+      const handleDomReady = () => {
+        document.removeEventListener('DOMContentLoaded', handleDomReady)
+        scheduleInitialization()
+      }
+      document.addEventListener('DOMContentLoaded', handleDomReady)
     } else {
-      this.initialize()
+      scheduleInitialization()
     }
   }
 
@@ -315,8 +323,6 @@ export class NewsletterFormElement extends LitElement {
   }
 }
 
-// Register the custom element
-if (!customElements.get('newsletter-form')) {
-  customElements.define('newsletter-form', NewsletterFormElement)
-}
+export const registerNewsletterFormWebComponent = (tagName = 'newsletter-form') =>
+  defineCustomElement(tagName, NewsletterFormElement)
 

src/components/CallToAction/Newsletter/index.astro

@@ -149,6 +149,6 @@ const {
 </newsletter-form>
 
 <script>
-  import '@components/CallToAction/Newsletter/client'
-  // Web component auto-initializes when custom element is defined
+  import { registerNewsletterFormWebComponent } from '@components/CallToAction/Newsletter/client'
+  registerNewsletterFormWebComponent()
 </script>

src/components/Carousel/client/index.ts

@@ -3,6 +3,7 @@ import Autoplay from 'embla-carousel-autoplay'
 import { addButtonEventListeners } from '@components/scripts/elementListeners'
 import { addScriptBreadcrumb, ClientScriptError } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { defineCustomElement } from '@components/scripts/utils'
 
 const SCRIPT_NAME = 'CarouselElement'
 
@@ -297,6 +298,7 @@ declare global {
   }
 }
 
-if (typeof window !== 'undefined' && !customElements.get('carousel-slider')) {
-  customElements.define('carousel-slider', CarouselElement)
+export const registerCarouselWebComponent = (tagName = 'carousel-slider') => {
+  if (typeof window === 'undefined') return
+  defineCustomElement(tagName, CarouselElement)
 }

src/components/Carousel/index.astro

@@ -203,5 +203,6 @@ if (limit) {
 }
 
 <script>
-  import '@components/Carousel/client'
+  import { registerCarouselWebComponent } from '@components/Carousel/client'
+  registerCarouselWebComponent()
 </script>

src/components/Consent/Banner/client/index.ts

@@ -20,6 +20,7 @@ import {
 } from '@components/Consent/Banner/client/selectors'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { defineCustomElement } from '@components/scripts/utils'
 
 /**
  * Consent Banner Custom Element
@@ -359,7 +360,5 @@ export class ConsentBannerElement extends LitElement {
   }
 }
 
-// Register the custom element
-if (!customElements.get('consent-banner')) {
-  customElements.define('consent-banner', ConsentBannerElement)
-}
+export const registerConsentBannerWebComponent = (tagName = 'consent-banner') =>
+  defineCustomElement(tagName, ConsentBannerElement)

src/components/Consent/Banner/index.astro

@@ -67,9 +67,9 @@ import CookieSvg from '@assets/images/site/cookie.svg'
 </consent-banner>
 
 <script>
-  // Import the Web Component - it will auto-register
-  import '@components/Consent/Banner/client'
+  import { registerConsentBannerWebComponent } from '@components/Consent/Banner/client'
   import { initConsentSideEffects } from '@components/scripts/store'
+  registerConsentBannerWebComponent()
 
   // Initialize cookie consent side effects with Astro View Transitions
   document.addEventListener('astro:page-load', () => {

src/components/Consent/Preferences/client/index.ts

@@ -19,6 +19,7 @@ import {
   getAllowAllBtn,
   getSavePreferencesBtn,
 } from '@components/Consent/Preferences/client/selectors'
+import { defineCustomElement } from '@components/scripts/utils'
 
 /**
  * Consent Preferences web component
@@ -302,7 +303,5 @@ export const showConsentCustomizeModal = (): void => {
   modal.style.display = 'flex'
 }
 
-// Register the custom element (with guard against duplicate registration)
-if (!customElements.get('consent-preferences')) {
-  customElements.define('consent-preferences', ConsentPreferencesElement)
-}
+export const registerConsentPreferencesWebComponent = (tagName = 'consent-preferences') =>
+  defineCustomElement(tagName, ConsentPreferencesElement)

src/components/Consent/Preferences/index.astro

@@ -196,5 +196,6 @@ import logoSvg from '@assets/images/site/logo.svg'
 
 <!-- Privacy Preferences Management Script -->
 <script>
-  import '@components/Consent/Preferences/client'
+  import { registerConsentPreferencesWebComponent } from '@components/Consent/Preferences/client'
+  registerConsentPreferencesWebComponent()
 </script>

src/components/Footer/client/index.ts

@@ -6,6 +6,7 @@ import { LitElement } from 'lit'
 import { getHireMeAnchorElement } from '@components/Footer/client/selectors'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
+import { defineCustomElement } from '@components/scripts/utils'
 
 class FooterElement extends LitElement {
   private hireMeAnchor: HTMLAnchorElement | null = null
@@ -54,8 +55,7 @@ class FooterElement extends LitElement {
   }
 }
 
-if (!customElements.get('site-footer')) {
-  customElements.define('site-footer', FooterElement)
-}
+export const registerFooterWebComponent = (tagName = 'site-footer') =>
+  defineCustomElement(tagName, FooterElement)
 
 export { FooterElement }