使用Svelte，我想设置一个具有切换效果的幻灯片切换元素。

但是我也希望在SEO的服务器端呈现默认的不可见文本。

所以我最终得到了这个窍门：

<script>
  import { slide } from 'svelte/transition';

  export let title;
  // We need to combine visible and hidden to make sure the text is rendered on SSR calls.
  export let visible = true;
  export let hidden = true;

  if (typeof window !== 'undefined') {
    visible = false;
    hidden = false;
  }
</script>

<div class="border mb-6">
  <div
    class="p-6 select-none cursor-pointer flex items-center"
    on:click={() => visible = !visible}
  >
    <h3 class="text-base flex-1">{title}</h3>
    <i class="fa {visible ? 'fa-caret-up text-primary' : 'fa-caret-right'}"></i>
  </div>
  {#if visible}
    <div class="bg-primary p-6 article" transition:slide class:hidden>
      <slot/>
    </div>
  {/if}
</div>

它可以工作，但这有点棘手，对我来说更像是一种解决方法。

此外，它还会在页面加载时产生一些细微的毛刺，例如图标在立即回滚之前显示为“打开”。

我可以更聪明地实现它吗？