diff --git a/src/panels/lovelace/badges/hui-badge.ts b/src/panels/lovelace/badges/hui-badge.ts
index e3e1ddde56..f567257649 100644
--- a/src/panels/lovelace/badges/hui-badge.ts
+++ b/src/panels/lovelace/badges/hui-badge.ts
@@ -67,6 +67,11 @@ export class HuiBadge extends ConditionalListenerMixin<LovelaceBadgeConfig>(
     if (this.hass) {
       this._element.hass = this.hass;
     }
+    // Update element when the visibility of the badge changes, e.g. custom badge
+    this._element.addEventListener("badge-visibility-changed", (ev: Event) => {
+      ev.stopPropagation();
+      this._updateVisibility();
+    });
     this._element.addEventListener(
       "ll-upgrade",
       (ev: Event) => {
@@ -168,7 +173,11 @@ export class HuiBadge extends ConditionalListenerMixin<LovelaceBadgeConfig>(
       fireEvent(this, "badge-visibility-changed", { value: visible });
     }
 
-    if (!visible && this._element.parentElement) {
+    if (this._element.connectedWhileHidden === true) {
+      if (!this._element.parentElement) {
+        this.appendChild(this._element);
+      }
+    } else if (!visible && this._element.parentElement) {
       this.removeChild(this._element);
     } else if (visible && !this._element.parentElement) {
       this.appendChild(this._element);
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index c946d9bccf..644b7c9a86 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -44,6 +44,7 @@ export interface Lovelace {
 
 export interface LovelaceBadge extends HTMLElement {
   hass?: HomeAssistant;
+  connectedWhileHidden?: boolean;
   setConfig(config: LovelaceBadgeConfig): void;
 }