From 47e2f47b5807cc663c42062803c00b62ad67cd54 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 9 May 2022 16:34:06 -0700
Subject: [PATCH] Update the elements root when the config changes.

---
 src/components/elements.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/elements.ts b/src/components/elements.ts
index 71578269..2eada158 100644
--- a/src/components/elements.ts
+++ b/src/components/elements.ts
@@ -1,4 +1,11 @@
-import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultGroup,
+  unsafeCSS,
+  PropertyValues,
+} from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
 import { customElement, property } from 'lit/decorators.js';
 
@@ -110,12 +117,12 @@ export class FrigateCardElementsCore extends LitElement {
   /**
    * Create the root as necessary prior to rendering.
    */
-  protected willUpdate(): void {
+  protected willUpdate(changedProps: PropertyValues): void {
     try {
-      // The root is only created once, to avoid the elements being continually
-      // re-created & destroyed (for some elements, e.g. image, this would
-      // otherwise cause serious flickering).
-      if (!this._root) {
+      // The root is only created once per elements configuration change, to
+      // avoid the elements being continually re-created & destroyed (for some
+      // elements, e.g. image, recreation causes a flicker).
+      if (this.elements && (!this._root || changedProps.has('elements'))) {
         this._root = this._createRoot();
       }
     } catch (e) {