From 6134f415e9d55c872ff4c08c12c099a00ac8d5ed Mon Sep 17 00:00:00 2001
From: Robert Van Gorkom <vangorra@users.noreply.github.com>
Date: Tue, 28 Nov 2023 13:23:06 -0800
Subject: [PATCH] Fix race condition with picture-elements card custom elements
 (#18765)

---
 .../cards/hui-picture-elements-card.ts        | 44 +++++++++++++++----
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 15c7f02e1f..09f0455c2a 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -78,15 +78,10 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
 
     this._config = config;
 
-    this._elements = this._config.elements.map(
-      (elementConfig: LovelaceElementConfig) => {
-        const element = createStyledHuiElement(elementConfig);
-        if (this.hass) {
-          element.hass = this.hass;
-        }
-        return element as LovelaceElement;
-      }
-    );
+    this._elements = config.elements.map((element) => {
+      const cardElement = this._createElement(element);
+      return cardElement;
+    });
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -165,6 +160,37 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       }
     `;
   }
+
+  private _createElement(
+    elementConfig: LovelaceElementConfig
+  ): LovelaceElement {
+    const element = createStyledHuiElement(elementConfig) as LovelaceCard;
+    if (this.hass) {
+      element.hass = this.hass;
+    }
+    element.addEventListener(
+      "ll-rebuild",
+      (ev) => {
+        ev.stopPropagation();
+        this._rebuildElement(element, elementConfig);
+      },
+      { once: true }
+    );
+    return element;
+  }
+
+  private _rebuildElement(
+    elToReplace: LovelaceElement,
+    config: LovelaceElementConfig
+  ): void {
+    const newCardEl = this._createElement(config);
+    if (elToReplace.parentElement) {
+      elToReplace.parentElement.replaceChild(newCardEl, elToReplace);
+    }
+    this._elements = this._elements!.map((curCardEl) =>
+      curCardEl === elToReplace ? newCardEl : curCardEl
+    );
+  }
 }
 
 declare global {