StencilJS slot content flickering visible content

I am creating a simple StencilJS web component, I am passing details as slot to component. The content will be invisible till manually make visible by clicking the button.

But while the application loads slightly flickering is happening in the component.

How to avoid flickering, but my requirement is to pass the details as slot.

Component.tsx

import { Component, Prop, h, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  detailBox: HTMLElement;
  showDetails = () => {
    this.detailBox.classList.remove('display-none');
  };
  render() {
    return (
      <div>
        <button onClick={this.showDetails}>Show detail</button>
        <span
          id="detail"
          ref={elem => {
            this.detailBox = elem;
          }}
          class="display-none"
        >
          <slot></slot>
        </span>
      </div>
    );
  }
}

component.css

:host {
  display: block;
}

.display-none {
  visibility: hidden;
}

index.html

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/display-flickering.esm.js"></script>
    <script nomodule src="/build/display-flickering.js"></script>
    <style data-styles></style>
  </head>
  <body>
    <my-component> <button>I am from slot</button></my-component>
  </body>
</html>