Conditional TimelineOppositeContent messes up timeline alignment

[bytedream]

When wrapping a <TimelineOppositeContent> block in a svelte if statement, a .opposite-content <div> gets generated even if it shouldn't and messes up the timeline alignment.

<script>
let items = [
  { year: '2023', description: 'The year 2023' },
  { year: '2022', description: 'The year 2022' },
  { year: '2021', description: 'The year 2021' },
]

let opposite = true
</script>

<Timeline position="alternate">
  {#each items as item}
    <TimelineItem>
      {#if opposite}
        <TimelineOppositeContent slot="opposite-content">
          <p class="oposite-content-title">{item.year}</p>
        </TimelineOppositeContent>
      {/if}
      <TimelineSeparator>
        <TimelineDot />
      <TimelineConnector />
      </TimelineSeparator>
      <TimelineContent>
        <p class="content-description">{item.description}</p>
      </TimelineContent>
    </TimelineItem>
  {/each}
</Timeline>

opposite set to true:

{#if} condition removed or opposite set to false:

[bytedream]

As a dirty fix I currently remove all divs in onMount and in a <script> at the end of the svelte file manually:

<script>
...
let opposite = true

onMount(() => {
  if (opposite) document.querySelectorAll('.opposite-block').forEach(e => e.remove())
})
<script>

<Timeline position="alternate">
...
</Timeline>

{#if opposite}
  <script>
    document.querySelectorAll('.opposite-block').forEach(e => e.remove())
  </script>
{/if}