diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
index 6e7c58772d..359f388149 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
@@ -12,6 +12,7 @@ import type { LovelaceCard } from "../../types";
 import type { EnergyCardBaseConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import "../../../../components/ha-alert";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("hui-energy-compare-card")
 export class HuiEnergyCompareCard
@@ -33,6 +34,11 @@ export class HuiEnergyCompareCard
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean, reflect: true }) hidden = true;
 
+  // Energy compare card cannot tolerate being removed from the DOM by hui-card,
+  // as it calculates its own visibility and needs an active collection
+  // subscription to do so.
+  connectedWhileHidden = true;
+
   public getCardSize(): Promise<number> | number {
     return 1;
   }
@@ -106,7 +112,11 @@ export class HuiEnergyCompareCard
     this._end = data.end;
     this._startCompare = data.startCompare;
     this._endCompare = data.endCompare;
+    const oldHidden = this.hidden;
     this.hidden = !this._startCompare;
+    if (oldHidden !== this.hidden) {
+      fireEvent(this, "card-visibility-changed");
+    }
   }
 
   private _stopCompare(): void {
diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts
index f254bd28f3..9f6ec0b9c7 100644
--- a/src/panels/lovelace/cards/hui-card.ts
+++ b/src/panels/lovelace/cards/hui-card.ts
@@ -270,7 +270,11 @@ export class HuiCard extends ReactiveElement {
       fireEvent(this, "card-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 05d1ee101f..c3810265d9 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -65,6 +65,7 @@ export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   preview?: boolean;
   layout?: string;
+  connectedWhileHidden?: boolean;
   getCardSize(): number | Promise<number>;
   /** @deprecated Use `getGridOptions` instead */
   getLayoutOptions?(): LovelaceLayoutOptions;