Fix race condition with picture-elements card custom elements (#18765)

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(
+    this._elements = config.elements.map((element) => {
-      (elementConfig: LovelaceElementConfig) => {
+      const cardElement = this._createElement(element);
-        const element = createStyledHuiElement(elementConfig);
+      return cardElement;
-        if (this.hass) {
+    });
-          element.hass = this.hass;
-        }
-        return element as LovelaceElement;
-      }
-    );
   }
 
   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 {