Fold-entity-row: how to card-mod shadowRoot?

ildar170975 commented 2 years ago

My Home Assistant version: 2022.2.6

Fold-entity-row version (FROM BROWSER CONSOLE): 2.2.0

What I am doing: Trying to card-mod shadowRoot elements inside div#head or div#items.

What I expected to happen: card-mod works, styles are applied.

What happened instead: card-mod does NOT work, styles are NOT applied.

Minimal steps to reproduce:

Create the card:

- type: entities
entities:
  - type: custom:fold-entity-row
    card_mod:
      style:
        div#items hui-text-entity-row $: |
          hui-generic-entity-row {
            color: red;
          }
    head:
      entity: sun.sun
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

The style is not applied:

Create the card:

- type: entities
entities:
  - type: custom:fold-entity-row
    card_mod:
      style: |
        div#items hui-text-entity-row {
          color: red;
        }
    head:
      entity: sun.sun
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

The style is applied:

The same is for div#head elements. Earlier (a few months ago) it used to work.

Surely we may specify card-mod styles inside the head section & inside each "items" entity - and shadowRoot elements may be styled then. But this approach has some limitations: 1) You cannot style shadowRoot elements for the chevron button. 2) You cannot style ALL "items" rows at once.

Error messages from the browser console: none

By putting an X in the boxes ([X]) 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 commented 2 years ago

Found my old issue for card-mod about the same bug: https://github.com/thomasloven/lovelace-card-mod/issues/146#issuecomment-962464924 That issue was related to some other custom rows too.

ildar170975 commented 2 years ago

Another example - styling from the "Entities card's level":

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          <<: &ref_head
            type: section
            label: Inside
          card_mod:
            style: |
              .divider {
                background-color: red !important;
              }
        <<: &ref_settings
          open: true
          padding: 0
          entities:
            - sun.sun
            - sun.sun
            - sun.sun
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          <<: *ref_head
        <<: *ref_settings
    card_mod:
      style:
        .card-content fold-entity-row $ div#head hui-section-row $: |
          .divider {
            background-color: red !important;
          }
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          <<: *ref_head
        <<: *ref_settings
    card_mod:
      style:
        .card-content fold-entity-row $: |
          div#head hui-section-row {
            background-color: red !important;
          }

Card 1: It is possible to set background-color for divider on the head level. Card 2: The same style cannot be applied from the Entities card's level. Card 3: But some styling may be applied on the fold-entity-row $: level w/o going deep to the next shadowRoot.

ildar170975 commented 1 year ago

As for the 1st case with colored names/values - here is a currently working code:

  - type: entities
    entities:
      - type: custom:fold-entity-row
        card_mod:
          style:
            div#head :first-child:
              $ hui-generic-entity-row $: |
                .info {
                  color: red;
                }
            div#items :first-child:
              $ hui-generic-entity-row $: |
                .info {
                  color: cyan;
                }
        head:
          entity: sun.sun
        padding: 15
        open: true
        entities:
          - entity: sun.sun
            name: common color
          - entity: zone.home
            name: common color
          - entity: sensor.processor_use
            card_mod:
              style:
                hui-generic-entity-row $: |
                  .info {
                    color: magenta !important;
                  }
          - entity: input_boolean.test_boolean
            name: common color

As for the "divider case" - probably it was an issue related to this: Note 2 in https://github.com/thomasloven/lovelace-card-mod#dom-navigation

Here is a working code:

  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: Inside
        open: true
        padding: 0
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
    card_mod:
      style:
        .card-content:
          fold-entity-row:
            $:
              div#head hui-section-row:
                $: |
                  .divider {
                    background: red !important;
                  }

Have not checked these cases for some time; probably the card-mod plugin was fixed, now seems to work OK.

thomasloven / lovelace-fold-entity-row

Fold-entity-row: how to card-mod shadowRoot? #215