Hydration node mismatch when using snipcart <billing>

[baermathias]

Environment

• Operating System: Linux
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: css, build, vue, vite, meta, runtimeConfig
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-rytvwm?file=layouts/default.vue

Describe the bug

Using Snipcart with Nuxt works well if you use it just like this

<div
  hidden
  id="snipcart"
  data-api-key="my-key-here"
></div>

But if you use an order custom field, which includes native custom elements, you get errors (the below example is from https://docs.snipcart.com/v3/setup/order-custom-fields):

<div
  hidden
  id="snipcart"
  data-api-key="my-key-here"
>
  <billing section="top">
    <fieldset class="snipcart-form__set">
      <div class="snipcart-form__field">
        <snipcart-label for="storeToPickUpFrom" class="snipcart__font--tiny">
          Store to pick-up from
        </snipcart-label>
        <snipcart-select name="storeToPickUpFrom" class="snipcart-form__select  snipcart__font--secondary snipcart__font--bold">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3"> Three</option>
          <option value="4">Four</option>
        </snipcart-select>
      </div>
    </fieldset>
  </billing>
</div>

It first tells you to make sure to exclude custom elements from component resolution via compilerOptions.isCustomElement, which is fine and can be handled, but then still the following problem I can't resolve:

[Vue warn]: Hydration node mismatch:
- Client vnode: billing 
- Server rendered DOM: <!---->  
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous name="default" > 
  at <App key=1 > 
  at <NuxtRoot>

In the reproduction it can be seen, that it is not displayed correct. Instead of displaying it on the cart in the billing section it is displayed on the page. For the reproduction it is necessary to create a free snipcart account and paste the key into data-api-key. Hope somebody can help me out here.

Additional context

No response

Logs

No response

[danielroe]

The issue here is that Snipcart is transforming your HTML before Vue has a chance to hydrate it, meaning the HTML doesn't match between server/client. You may be able to solve using the upcoming #5688. Or you can defer loading the snipcard JS until Nuxt has mounted to the HTML.