USWDS-Sandbox - Test: Banner Elements

[mejiaj]

Created to reproduce issue outlined in uswds/web-components#65 (comment).

Preview

Preview link →

Problem statement

The following error is happening on Vite powered environments (i.e. AstroJS):

@uswds_web-components_components_usa-banner.js?v=abb78aad:1246 Uncaught (in promise) TypeError: currentDirective._$initialize is not a function
    at resolveDirective (@uswds_web-components_components_usa-banner.js?v=abb78aad:1246:24)
    at AttributePart._$setValue (@uswds_web-components_components_usa-banner.js?v=abb78aad:1668:14)
    at TemplateInstance._update (@uswds_web-components_components_usa-banner.js?v=abb78aad:1318:16)
    at _ChildPart._commitTemplateResult (@uswds_web-components_components_usa-banner.js?v=abb78aad:1524:16)
    at _ChildPart._$setValue (@uswds_web-components_components_usa-banner.js?v=abb78aad:1410:12)
    at render (@uswds_web-components_components_usa-banner.js?v=abb78aad:1840:8)
    at R.update (@uswds_web-components_components_usa-banner.js?v=abb78aad:1901:24)
    at R.performUpdate (@uswds_web-components_components_usa-banner.js?v=abb78aad:732:14)
    at R.scheduleUpdate (@uswds_web-components_components_usa-banner.js?v=abb78aad:676:25)
    at R.__enqueueUpdate (@uswds_web-components_components_usa-banner.js?v=abb78aad:652:25)

This issue is coming from a combination of issues lit directives [i.e. classMap and unsafeHTML] and vite development environment.

How we're using directives

We're using the following lit directives:

classMap

We're using classMap to toggle usa-banner__header--expanded, which is used mostly in mobile to toggle between the Here's how you know text and the close button icon.

unsafeHTML

This is used to pass strong text in the HTTPS section. Without it we (and users) would get this when adding their own text i.e. translations.

Workarounds

1. Force vite to use production build, like in 4521695.
2. Use CDN version of component

   <script
     type="module"
     src="https://esm.sh/@uswds/[email protected]/components/usa-banner">
   </script>

3. Avoid using directives (requires spike), biggest issue would be finding alternatives for the HTTPS text being escaped. Example without using unsafeHTML:

[mejiaj]

Tip

This NODE_ENV forces vite to run in production mode and should resolve the initializer conflict.