Picture-elements: styling some conditional element may cause styling other elements

[ildar170975]

HA 2023.10.2 card-mod 3.2.3

My lovelace configuration method (GUI or yaml): both

Consider this picture-elements card:

type: picture-elements
image: /local/images/test/white.jpg
elements:
  - type: state-label
    entity: sun.sun
    style:
      top: 17%
      left: 25%

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: state-label
        entity: sun.sun
        style:
          top: 30%
          left: 25%

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: 7%
          left: 75%
      - type: state-label
        entity: sun.sun
        style:
          top: 17%
          left: 75%
    card_mod:
      style: |
        hui-state-label-element {
          color: red;
        }

Card-mod style is defined for one conditional element - particularly for a state-label sub-element. I expect to see this style applied for this state-label element only. Instead, this style is applied for all state-label elements on the card.

Note that the card-mod style is defined w/o entering "shadowRoot". Otherwise - the style is applied for a proper element only (as expected):

type: picture-elements
image: /local/images/test/white.jpg
elements:
  - type: state-label
    entity: sun.sun
    style:
      top: 17%
      left: 25%

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: state-label
        entity: sun.sun
        style:
          top: 30%
          left: 25%

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          top: 7%
          left: 75%
      - type: state-label
        entity: sun.sun
        style:
          top: 17%
          left: 75%
    card_mod:
      style:
        hui-state-label-element:
          $: |
            div {
              color: red;
            }

Unfortunately, when using card-mod styles with entering "shadowRoot" another issue is observed.

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.