avoid-flash-of-unstyled-slot-stencil

light-dom.css

my-component {
  display: none;
}

my-component[is-loaded] {
  display: block;
}

my-component.ts

@Component({
  tag: 'my-component,
  shadow: true,
})
export class MyComponent {
  @Prop({reflect: true}) isLoaded : boolean;

  componentDidLoad () : void {
    this.isLoaded = true;
  }
}

Better alternative but unsupported in IE / Edge:

my-component:not(:defined) {
  display: none;
}