HelperText doesn't render correctly when conditionally added

[tuckergordon]

Describe the bug Textfield HelperText does not render in the correct location if placed inside an {#if}. Noticed this with CharacterCounter but I'm guessing a similar bug is causing #392 and possibly #245 (though that issue is pretty old at this point).

I have a hunch it could be related to #384 as well, as those are both situations where an element is conditionally rendered and some of the styles are not loaded correctly.

To Reproduce Steps to reproduce the behavior:

Add HelperText to a Textfield inside a conditional, e.g.

export let charLimit = 18;

<Textfield label="Write a message..." input$maxLength={charLimit}>
  {#if charLimit}
    <CharacterCounter slot="helper" />
  {/if}
</Textfield>

Expected behavior Character count displays below textfield

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version ^7.0.0-beta.14

Additional context For those running into a similar issue, you can use <svelte:fragment> as a workaround:

<Textfield label="Write a message..." input$maxLength={charLimit}>
  <svelte:fragment slot="helper">
    {#if charLimit}
      <CharacterCounter />
    {/if}
  </svelte:fragment>
</Textfield>