How to solve Shoelace sl-input style issues when used in Svelte app

Question

I have an issue with using Shoelace sl-input component with a Svelte application. When the component first loads, ie on refresh the browser, the element appears correctly styled for a moment, and then a short moment after, the padding is removed from the input. It remains this way until the bundler (vite) updates the content due to a change in the components code.

My svelte layout:

<svelte:head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js"></script>
</svelte:head>

<slot />

and my component:

<script>
  import Debug from '@/develop/components/Debug.svelte'

  let data = {
    label: 'Mrs Smith',
    email: '[email protected]',
    phone: '(760) 697-2540'
  }
  
  function onChange (event) {
    const field = event.target.getAttribute('field')
    const value = event.target.value
    // todo: sanitize, validate
    data[field] = value
  }
</script>

<form method='' actions='' style='--d:grid; --gg:1rem;'>
  <sl-input label='Name' field='label' value={data.label} on:sl-change={onChange}></sl-input>
  <sl-input label='Email' field='email' value={data.email} on:sl-change={onChange}></sl-input>
  <sl-input label='Phone' field='phone' value={data.phone} on:sl-change={onChange}></sl-input>
</form>

<Debug data={data} />

I cannot understand why the styling starts out correct, with padding on the input, then momentarily loses that padding, only to return when VITE refreshes content on change.