Style gone after page refresh

[cho0p]

My Home Assistant version: core-2021.11.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Using card-mod to apply different colors to badges based on availability (home / not home)

  - entity: device_tracker.82_98_86_f8_67_aa
    card_mod:
      style: |
        :host {
          --label-badge-red: {% if is_state('device_tracker.82_98_86_f8_67_aa', 'home') %} green {% else %} grey {% endif %};
        } 
  - entity: device_tracker.18_01_f1_4a_a0_52
    style: |
      :host {
        --label-badge-red: {% if is_state('device_tracker.18_01_f1_4a_a0_52', 'home') %} green {% else %} grey {% endif %};
      } 

What I expected to happen: See different colors for badges

After page refresh in browser style is gone. badges are just red:

What happened instead: Correct colors are sometimes visible but after a page refresh they are just red. Happens with Edge, Chrome and on Android Mobile.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

      - entity: device_tracker.82_98_86_f8_67_aa
        card_mod:
          style: |
            :host {
              --label-badge-red: {% if is_state('device_tracker.82_98_86_f8_67_aa', 'home') %} green {% else %} grey {% endif %};
            } 
      - entity: device_tracker.18_01_f1_4a_a0_52
        style: |
          :host {
            --label-badge-red: {% if is_state('device_tracker.18_01_f1_4a_a0_52', 'home') %} green {% else %} grey {% endif %};
          } 

# End of code

Error messages from the browser console:

card-mod.js?hacstag=1909275243013:1

   The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information.

(anonym) @ card-mod.js?hacstag=1909275243013:1

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Herbs851]

Hi,

Same issue here.

Home assistant core 2021.11.2 and card-mod 3.0.13 (venv python and debian 11).

Rollback to card-mod 3.0.11 to restore normal behaviour.

[nao-pon]

Hi! Hello!

I had a similar issue and it was fixed when I rolled back to card-mod 3.0.12.

(Home assistant core 2021.11.2 + card-mod 3.0.13)

[tabnul]

I had exact this issue , sometimes the style was applied, sometimes not.
When i edited the style, and stayed in the 'edit dashboard view' all was fine. After i went back to the normal view (click cross) it went wrong.

I got it structurally fixed after installing 3.1.0 and making sure the performance improvement setting is set correctly, for HACS:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

[batzillm]

Same issue here in combination with multiple-entity-row. Startet with the recent HA Update to 2021.11.x.
The extra_module_url is added to my configuration.yaml. Same behaviour in Compannion App, Firefox and Chrome.
Style does not get applied when opening the page. When i click edit, the style is correctly applied in the edit-popup.
When editing something in the config (e.g. adding a random space) and saving it, the style is applied on the real page aswell until i reload the page/clear cache/use other device.

  - entity: binary_sensor.bruni_status_ok
    type: custom:multiple-entity-row
    name: Status
    icon: mdi:information
    show_state: false
    card_mod:
      style: |
        .entities-row {
           align-items: flex-start;
           line-height: normal;
          }
        :host {
          --my-bruni-tr-icon: {% if states.binary_sensor.lely_tank_spulmodus.state == 'on' %} mdi:water-alert; {% else %} mdi:pause-circle; {% endif %}
          }  
    entities:
      - entity: binary_sensor.lely_tank_spulmodus
        name: Tank Cleaning
        state_color: true
        icon: mdi:help-rhombus
        styles:
          '--card-mod-icon': var(--my-bruni-tr-icon)
# more entities to come

[tabnul]

Same issue here in combination with multiple-entity-row. Startet with the recent HA Update to 2021.11.x. The extra_module_url is added to my configuration.yaml. Same behaviour in Compannion App, Firefox and Chrome. Style does not get applied when opening the page. When i click edit, the style is correctly applied in the edit-popup. When editing something in the config (e.g. adding a random space) and saving it, the style is applied on the real page aswell until i reload the page/clear cache/use other device.

  - entity: binary_sensor.bruni_status_ok
    type: custom:multiple-entity-row
    name: Status
    icon: mdi:information
    show_state: false
    card_mod:
      style: |
        .entities-row {
           align-items: flex-start;
           line-height: normal;
          }
        :host {
          --my-bruni-tr-icon: {% if states.binary_sensor.lely_tank_spulmodus.state == 'on' %} mdi:water-alert; {% else %} mdi:pause-circle; {% endif %}
          }  
    entities:
      - entity: binary_sensor.lely_tank_spulmodus
        name: Tank Cleaning
        state_color: true
        icon: mdi:help-rhombus
        styles:
          '--card-mod-icon': var(--my-bruni-tr-icon)
# more entities to come

Are you sure your extra module config is set correctly? (See my post above)
Your description is exactly what i had untill i set it to the right folder.
Initially i set it to the file in the www folder which did not work due to mimetype errors.

What does your browser console show?
I received errors when it didnt work.

[batzillm]

I tried several different types to define the module in configuration.yaml (Installed via HACS). None of these three fixed the issue.

frontend:
  extra_module_url:
    #- /local/card-mod.js
    #- /local/community/lovelace-card-mod/card-mod.js
    - /hacsfiles/lovelace-card-mod/card-mod.js

The browser console shows, that card-mod is the first loaded module which is loaded properly and then a second time which fails. In my understanding, this should not be a problem...

The HA Log also throws this related error:

Logger: frontend.js.latest.202111090
Source: components/system_log/__init__.py:190
First occurred: 14:22:38 (4 occurrences)
Last logged: 14:39:49
http://x.x:8123/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524311:6:0 NotSupportedError: CustomElementRegistry.define: 'mod-card' has already been defined as a custom element

[Kedryn]

I'm experiencing exact same problem. Some cards gets the right colors when refreshing, some don't, but in the code edit windows, colors are always applied.

HA 2022.2 and card_mod 3.1.2

[sonic43]

Hello, I have the same issue and solves it by adding the setting below in the configuration.yaml.
However, it only solves for "Browser" but not for "APP".
APP still has the same issue that it can't reflect the correct color once I kill the APP in background and relaunch the APP again.
I found if I "refresh the page" then it can work again. But the method of refreshing the page is by editing the dashboard (need to make some changes).
Therefore, it is not so convenient as just pulling down the page to refresh. (App doesn't have such action)
Do we have any chance for this improvement? thank you!

HA 2024.1.6 and card_mod 3.4.2
Android phone: Samsung S21
APP: 2024.1.5-full

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

[supaeasy]

Same issue in app here.