Retire use of @query and use ref univerally.

src/components/elements.ts

@@ -1,6 +1,7 @@
 import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, query } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { customElement, property } from 'lit/decorators.js';
 
 import {
   FrigateConditional,
@@ -144,9 +145,6 @@ export class FrigateCardElements extends LitElement {
   @property({ attribute: false })
   protected conditionState?: ConditionState;
 
-  @query('frigate-card-elements-core')
-  _core!: FrigateCardElementsCore;
-
   /**
    * Handle a picture element to be removed from the menu.
    * @param ev The event.
@@ -235,16 +233,14 @@ export class FrigateCardElements extends LitElement {
 export class FrigateCardElementsConditional extends LitElement {
   protected _config?: FrigateConditional;
   protected _hass?: HomeAssistant;
-
-  @query('frigate-card-elements-core')
-  _core?: FrigateCardElementsCore;
+  protected _refCore: Ref<FrigateCardElementsCore> = createRef() ;
 
   /**
    * Set the Home Assistant object.
    */
   set hass(hass: HomeAssistant) {
-    if (this._core) {
-      this._core.hass = hass;
+    if (this._refCore.value) {
+      this._refCore.value.hass = hass;
     }
     this._hass = hass;
   }
@@ -283,6 +279,7 @@ export class FrigateCardElementsConditional extends LitElement {
   protected render(): TemplateResult | void {
     if (fetchStateAndEvaluateCondition(this, this._config.conditions)) {
       return html` <frigate-card-elements-core
+        ${ref(this._refCore)}
         .hass=${this._hass}
         .elements=${this._config.elements}
       >

src/components/image.ts

@@ -7,7 +7,8 @@ import {
   unsafeCSS,
 } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
 
 import { CachedValueController } from '../cached-value-controller.js';
 import { CameraConfig, ImageViewConfig } from '../types.js';
@@ -40,8 +41,7 @@ export class FrigateCardImage extends LitElement {
   @state()
   protected _imageConfig?: ImageViewConfig;
 
-  @query('img')
-  protected _image?: HTMLImageElement;
+  protected _refImage: Ref<HTMLImageElement> = createRef() ;
 
   protected _cachedValueController?: CachedValueController<string>;
   protected _boundVisibilityHandler = this._visibilityHandler.bind(this);
@@ -144,7 +144,7 @@ export class FrigateCardImage extends LitElement {
    * Handle document visibility changes.
    */
   protected _visibilityHandler(): void {
-    if (!this._image) {
+    if (!this._refImage.value) {
       return;
     }
     if (document.visibilityState === 'hidden') {
@@ -196,8 +196,8 @@ export class FrigateCardImage extends LitElement {
    * Force the img element to the stock image.
    */
   protected _forceStockImage(): void {
-    if (this._image) {
-      this._image.src = defaultImage;
+    if (this._refImage.value) {
+      this._refImage.value.src = defaultImage;
     }
   }
 
@@ -205,6 +205,7 @@ export class FrigateCardImage extends LitElement {
     const src = this._cachedValueController?.value;
     return src
       ? html` <img
+          ${ref(this._refImage)}
           src=${src}
           @load=${(ev) => {
             dispatchMediaShowEvent(this, ev);