Fold-entity-row: how to card-mod shadowRoot?
ildar170975 opened this issue · 3 comments
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
- 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 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:
- You cannot style
shadowRoot
elements for the chevron button. - 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:
- 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.
Found my old issue for card-mod about the same bug:
thomasloven/lovelace-card-mod#146 (comment)
That issue was related to some other custom rows too.
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
.
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.