Even less flashing. FIx #114

package.json

@@ -1,7 +1,7 @@
 {
   "name": "card-mod",
   "private": true,
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "",
   "scripts": {
     "build": "rollup -c",

src/card-mod.ts

@@ -85,24 +85,29 @@ export class CardMod extends LitElement {
     merge_deep(styles, theme_styles);
 
     const styleChildren: Set<CardMod> = new Set();
+    let thisStyle: any;
     const parent = this.parentElement || this.parentNode;
-    if (!styles["."]) this._styles = "";
+
+    if (!styles["."]) thisStyle = "";
     for (const [key, value] of Object.entries(styles as object)) {
       if (key === ".") {
-        this._styles = value;
+        thisStyle = value;
       } else {
-        for (const el of await selectTree(parent, key, true)) {
-          if (el)
-            styleChildren.add(
-              await applyToElement(
-                el,
-                `${this.type}-child`,
-                value,
-                this.variables,
-                null,
-                false
-              )
+        const elements = await selectTree(parent, key, true);
+        if (!elements) continue;
+        for (const el of elements) {
+          if (el) {
+            const child = await applyToElement(
+              el,
+              `${this.type}-child`,
+              value,
+              this.variables,
+              null,
+              false
             );
+            child.refresh();
+            styleChildren.add(child);
+          }
         }
       }
     }
@@ -114,6 +119,9 @@ export class CardMod extends LitElement {
     }
     this._styleChildren = styleChildren;
 
+    if (this._styles === thisStyle) return;
+    this._styles = thisStyle;
+
     if (this._styles && hasTemplate(this._styles)) {
       this._renderer = this._renderer || this._style_rendered.bind(this);
       bind_template(this._renderer, this._styles as string, this.variables);
@@ -126,6 +134,7 @@ export class CardMod extends LitElement {
 
   private async _disconnect() {
     this._observer.disconnect();
+    this._styles = "";
     await unbind_template(this._renderer);
   }
 

src/patch/ha-card.ts

@@ -48,6 +48,7 @@ customElements.whenDefined("ha-card").then(() => {
         const _update = pn.update;
         pn.update = function (changedProperties: any) {
           _update.bind(this)(changedProperties);
+          cardMod.refresh();
           this.updateComplete.then(() => {
             cardMod.refresh();
           });

src/theme-watcher.ts

@@ -12,7 +12,7 @@ Promise.race(bases).then(() => {
   window.setTimeout(() => {
     hass().connection.subscribeEvents(() => {
       window.setTimeout(refresh_theme, 500);
-    });
+    }, "themes_updated");
     document
       .querySelector("home-assistant")
       ?.addEventListener("settheme", refresh_theme);

test/themes/test.yaml

@@ -0,0 +1,11 @@
+test:
+  card-mod-theme: test
+  card-mod-card: |
+
+    ha-card {
+      background: url("https://placebear.com/640/480")
+    }
+    ha-card.top-level-card {
+      border: solid 1px var(--secondary-text-color);
+      background: url("https://placekitten.com/640/480");
+    }