Fix #185

package.json

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

src/card-mod.ts

@@ -196,10 +196,18 @@ export class CardMod extends LitElement {
   }
 }
 
-if (!customElements.get("card-mod")) {
-  customElements.define("card-mod", CardMod);
-  console.info(
-    `%cCARD-MOD ${pjson.version} IS INSTALLED`,
-    "color: green; font-weight: bold"
-  );
-}
+(async () => {
+  // Wait for scoped customElements registry to be set up
+  // otherwise the customElements registry card-mod is defined in
+  // may get overwritten by the polyfill if card-mod is loaded as a module
+  while (customElements.get("home-assistant") === undefined)
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+  if (!customElements.get("card-mod")) {
+    customElements.define("card-mod", CardMod);
+    console.info(
+      `%cCARD-MOD ${pjson.version} IS INSTALLED`,
+      "color: green; font-weight: bold"
+    );
+  }
+})();

src/mod-card.ts

@@ -79,6 +79,12 @@ class ModCard extends LitElement {
   }
 }
 
-if (!customElements.get("mod-card")) {
-  customElements.define("mod-card", ModCard);
-}
+(async () => {
+  // See explanation in card-mod.ts
+  while (customElements.get("home-assistant") === undefined)
+    await new Promise((resolve) => window.setTimeout(resolve, 100));
+
+  if (!customElements.get("mod-card")) {
+    customElements.define("mod-card", ModCard);
+  }
+})();

src/patch/ha-icon.ts

@@ -60,9 +60,8 @@ customElements.whenDefined("ha-svg-icon").then(() => {
       if (iconColor) this.style.color = iconColor;
     };
 
-    (async () => {
+    const bindCM = async () => {
       const cardMods = await findParentCardMod(this);
-
       for (const cm of cardMods) {
         cm.addEventListener("card-mod-update", async () => {
           await cm.updateComplete;
@@ -71,6 +70,11 @@ customElements.whenDefined("ha-svg-icon").then(() => {
       }
 
       updateIcon();
+      return cardMods;
+    };
+
+    (async () => {
+      if ((await bindCM()).size == 0) window.setTimeout(() => bindCM(), 1000);
     })();
   };
 });

test/themes/test.yaml

@@ -9,3 +9,7 @@ test:
       border: solid 1px var(--secondary-text-color);
       background: url("https://placekitten.com/640/480");
     }
+  card-mod-root: |
+    paper-tab:nth-of-type(2) {
+      --card-mod-icon: {{ iif(is_state('light.kitchen_lights', 'on'), "mdi:star", "mdi:star-outline")}};
+    }

test/views/1_cards.yaml

@@ -21,6 +21,7 @@ x-anchors:
 # Applying basic styles to cards
 #
 title: Cards
+icon: mdi:home
 cards:
   - type: vertical-stack
     cards:

test/views/2_separate_items.yaml

@@ -13,6 +13,7 @@ x-anchors:
 # Styling individual items
 #
 title: Individual items
+icon: mdi:home
 cards:
   - type: vertical-stack
     cards: