Closed ildar170975 closed 2 years ago
I can reproduce this, so that's... something.
I don't get any freezing, but some noticeable slowdown. It's much better if the number of steps are limited, though:
card_mod:
style:
hui-state-badge-element:
$ ha-state-label-badge:
$ ha-label-badge $: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.: |
ha-state-label-badge {
color: orange;
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
}
This is a new info for me, thank you! Could you answer these questions:
1) Is there any difference between:
element$:
element$:
...
and
element:
$element$:
...
?
2) If styling ONE element, not like "all similar elements" - shall I use this:
element$:
element$:
...
instead of this:
element:
$:
element:
$:
...
?
element $
will find the first instance of element
and then all shadowRoots in it (which is one).
element
will find all instances of element
.
For every complete step in the chain, card-mod creates a new card-mod
element, which monitors its parent for changes so it can update itself if something happens.
That means if you do
element-a:
$:
element-b:
$:
There will be one card-mod
created in each element-a
, one in the shadowRoot of each element-a
, one in each element-b
in every element-a
and one in the shadowRoot of every element-b
in each element-a
.
Meanwhile
element-a:
$ element-b $:
will create one card-mod
element in each element-a
, and one in the shadowRoot of the first element-b
in the each element-a
.
That may up to 50% less elements that have to do stuff when things change.
You can inspect the differences using the debugging tips at the end of the dom-navigation section.
Side note - I really should change it so that element-b $
selects the shadowRoot of all element-b
... :thinking:
So, for your second question: Yes, that would be more efficient. Or even element $ element $
if it's only one instance.
Thomas, very clear explanation! Thank you.
My Home Assistant version: 2021.11.1
My lovelace configuration method (GUI or yaml): yaml
What I am doing: Styling state-badges inside Picture elements card.
What I expected to happen: Styling is performed, UI elements respond to user's actions.
What happened instead: Styling is performed, UI elements DO NOT respond to user's actions.
Minimal steps to reproduce: Create 2 views: view 1: This view causes freezes.
Which produces this view:![image](https://user-images.githubusercontent.com/71872483/140829914-1f289c20-610c-4344-8b5a-3a175b56a1f1.png)
view 2: This view works fine.
Which produces this view:![image](https://user-images.githubusercontent.com/71872483/140829882-786f705d-a022-41ea-99df-c07d202cf915.png)
Styling for the both views is same: view 1 - styling made for ALL badges; view 2 - styling made for SOME badges.
Error messages from the browser console: No error messages, only verbose messages: "[Violation] Forced reflow while executing JavaScript tookms"
view 1: Number of verbose messages quickly increases, may become >1000 within several minutes. The view 1 freezes, this was observed just recently.![image](https://user-images.githubusercontent.com/71872483/140830060-82973cad-0fb7-44de-a2bc-d4068aeac1fe.png)
If![image](https://user-images.githubusercontent.com/71872483/140830236-3841054f-3ba1-4853-beed-069767c917be.png)
card-mod
is removed - no verbose messages, no freezes:view 2: Number of verbose messages is usually not more than 2, no freezes:![image](https://user-images.githubusercontent.com/71872483/140830020-662fde32-76fb-43e2-8b61-555d329a23a9.png)
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.