fix(web-components): load both web-components.js AND account.js bundles

[paul-phan]

What

Add the web-components.js script tag alongside web-components/account.js in app/root.tsx. Switch both from async to defer so they execute in document order.

+ <script
+   type="module"
+   src="https://cdn.shopify.com/storefront/web-components.js"
+   defer
+   nonce={nonce}
+ />
  <script
    type="module"
    src="https://cdn.shopify.com/storefront/web-components/account.js"
-   async
+   defer
    nonce={nonce}
  />

Why

The header's <ShopifyAccountButton> renders <shopify-account> nested inside <shopify-store>, but only the account bundle was loaded, producing this console warning on every page load and rendering the empty <span slot="signed-out-avatar"> fallback instead of the account widget:

[shopify-account] <shopify-store> custom element is not registered.
  Ensure the storefront-components bundle is loaded so
  <shopify-account> can fetch data.

Bundle analysis (verified by fetching + tracing both bundles)

customElements.define uses template-literal interpolation \shopify-${t}`, so literal-string grep for "shopify-store"misses the registrations. Tracing the registration helperI(name, ctor)` reveals:

Bundle	Size	Registers
cdn.shopify.com/storefront/web-components.js	92 KB	shopify-store, shopify-cart, shopify-catalog, shopify-context, shopify-data, shopify-list-context, shopify-media, shopify-money, shopify-variant-selector
cdn.shopify.com/storefront/web-components/account.js	31 KB	shopify-account, shopify-customer-account-data, shopify-render, shopify-element-wrapper

The account bundle DOES dynamic-import a chunked ./account/store-*.js (visible in the bundle source as the last import() call), but the chunk arrives after <shopify-account>'s connectedCallback runs, hitting a race. The connectedCallback calls customElements.get("shopify-store"), finds nothing, emits the warning, and bails.

This corrects my earlier (closed) PR #385 which claimed web-components.js was an umbrella superset \u2014 it isn't. The two bundles are disjoint feature sets, and <shopify-account> inside <shopify-store> needs both.

Why defer instead of async

Module scripts are deferred by default. Both defer and the implicit deferred behaviour of module scripts preserve document order at execution time. async does NOT preserve order \u2014 if account.js happens to finish downloading first and executes before web-components.js, the same warning fires. The explicit defer is belt-and-suspenders to encode the intent.

Behaviour change

• Before: <shopify-account> connectedCallback warning on every page render. Login widget shows the slot-provided <UserIcon> fallback indefinitely; user can't see signed-in avatar or account dropdown.
• After: No warning. <shopify-store> is registered first, then <shopify-account> finds its parent on connectedCallback and renders the full account widget.

Verification

1. Visit any page on the dev server, open DevTools \u2192 Console.
2. Filter to "shopify" \u2014 the [shopify-account] <shopify-store> custom element is not registered warning should be absent.
3. DevTools \u2192 Network \u2192 filter to "web-components" \u2014 both bundles should load with HTTP 200.
4. Sign in via the account widget \u2014 the widget should render the account dropdown rather than the static <UserIcon> fallback.

Net bundle cost

+92 KB gzipped (one new module script). Negligible on the critical path because both scripts are defer \u2014 they don't block HTML parsing or initial render. Net: a one-time cost for the warning to go away and the account widget to actually work.