mod-card for hui-element: erratic results

[ildar170975]

My Home Assistant version: 2022.2.3 card-mod 3.1.2 (stopped working after this update) Win10x64, Chrome

My lovelace configuration method (GUI or yaml): storage/yaml

What I am doing: Styling a hui-input-select-entity-row by using a mod-card for hui-element.

What I expected to happen: The style is applied.

What happened instead: The style is not applied.

Minimal steps to reproduce:

1. Create a card:

type: entities
entities:
  - type: custom:mod-card
    card: &ref_card
      type: custom:hui-element
      row_type: input-select-entity
      entity: input_select.test_value
    card_mod:
      style:
        hui-element $: |
          hui-generic-entity-row {
            color: red;
          }
  - type: custom:mod-card
    card: *ref_card
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: red;
            }

Note the difference between rows:

        hui-element $: |

vs

        hui-element:
          $: |

2. The 1st row usually DO NOT have the style applied:

The 2nd row usually has the style applied:

3. The 1st row MAY get the style after a clearing a cache. But it helps a little - after a several page refresh (F5) the style is not applied again.

Note that the example is "synthetic" - applying the "color" style does nothing to the hui-generic-entity-row element. In my real setup the style is more complex and implemented inside a decluttering-card: the card used to build an "input-select" row with some customized styles. That is why hui-element & mod-card are used.

Error messages from the browser console: None.

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

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

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

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

• [x] 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.

[ildar170975]

Same for number-entity:

  - type: custom:mod-card
    card: &ref_card
      type: custom:hui-element
      row_type: number-entity
      entity: input_number.test_number
      name: Number
    card_mod:
      style:
        hui-element $: |
          hui-generic-entity-row {
            color: red;
          }
  - type: custom:mod-card
    card: *ref_card
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: red;
            }

Ideally both rows are styled - see the red color. But sometimes (in ~50%) only the 2nd row is styled.

How to reproduce:

1. Create the card.
2. Refresh the page.
3. The style is applied for both rows (or only for the 2nd row).
4. Refresh the page.
5. The style is applied only for the 2nd row (or for both rows ).

[ildar170975]

card-mod 3.1.5 - the problem still exists.

Note: since HA 2022.3 introduced a new MDC control for input_select, the example from the 1st post should be rewritten:

type: entities
title: Problem 130
entities:
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: input-select-entity
      entity: input_select.test_value
    card_mod:
      style:
        hui-element $:
          hui-generic-entity-row ha-select $: |
            span#label {
              color: red;
            }
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: input-select-entity
      entity: input_select.test_value
    card_mod:
      style:
        hui-element:
          $:
            hui-generic-entity-row ha-select $: |
              span#label {
                color: red;
              }
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: input-select-entity
      entity: input_select.test_value
    card_mod:
      style:
        hui-element $ hui-generic-entity-row ha-select $: |
          span#label {
            color: red;
          }

In 50% cases only the 2nd row is styled.

[ildar170975]

The issue is not observed in iOS Companion App (iPad Air 2, iOS 15.x)

[ildar170975]

Unfortunately, after some of the latest updates (either of HA or card-mod) styling of hui-element became more unstable. Even the 2nd variant does not guarantee a stable result:

type: entities
entities:
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: number-entity
      entity: input_number.test_number
      name: Number
    card_mod:
      style:
        hui-element $: |
          hui-generic-entity-row {
            color: red;
          }
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: number-entity
      entity: input_number.test_number
      name: Number
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: red;
            }

Both ways usually work in Editor:

But may be lost after F5 - both in "edit mode" & "non-edit mode":