Hiding a web part in SharePoint Framework (SPFx)

In some first-party web parts, like the Highlighted content web part, you can hide the web part if there’s nothing to show:

Screenshot of the highlighted content web part in SharePoint

This not only hides the contents of the web part but also sets the .ControlZone to [aria-hidden="true"] and the inner .ControlZone--control to be display: none.

Screenshot of Microsoft Edge's development tools, showing the components being hidden

For PnP Modern Search, they accomplish this by manually removing the margins and padding from ancestor elements:

if (this.properties.showBlankIfNoResult) {
  let element = this.domElement.parentElement;
  // check up to 3 levels up for padding and exit once found
  for (let i = 0; i < 3; i++) {
    const style = window.getComputedStyle(element);
    const hasPadding = style.paddingTop !== '0px';
    if (hasPadding) {
      element.style.paddingTop = '0px';
      element.style.paddingBottom = '0px';
      element.style.marginTop = '0px';
      element.style.marginBottom = '0px';
    }
    element = element.parentElement;
  }
}

However, there is an unsupported way to hide a web part like the first-party ones can. There is a private property on BaseClientSideWebPart called isVisible. Setting this to false will hide the web part.

export default class CredentialsWebPart extends BaseClientSideWebPart<CredentialsWebPartProps> {
  public render(): void {
    if (shouldHide) {
      //@ts-expect-error `isVisible` is a private property.
      this._isVisible = false;
    }
  }
}

Related posts