Closed SpartanTech closed 6 months ago
Here is inspecting the element in Chrome:
My attempt:
card_mod:
style:
ha-icon-button: |
mwc-icon-button {
color: purple;
aria-label: ok1;
label: ok2;
title: test;
}
.: |
ha-card {
#background: teal;
}
mwc-icon-button {
color: purple;
aria-label: ok1;
label: ok2;
title: test;
}
ha-icon-button {
color: purple;
aria-label: ok1;
label: ok2;
title: test;
}
Card-mod can only change css. Aria-label is not a css property.
i am trying to use card-mod to modify css in a lovelace card (midea dehumidifier card) in home assistant to change the text of a aria-label that is currently named 'Ion'. I wish to change that text to 'Pump'. It controls my dehumidifier pump
In Chrome after right clicking the text and inspecting, this is the JS path of that item:
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div:nth-child(3) > hui-card-options:nth-child(4) > midea-humidifier-card").shadowRoot.querySelector("#modes > ha-icon-button.ion-icon").shadowRoot.querySelector("mwc-icon-button").shadowRoot.querySelector("button")
And this is the outerHTML:
<button class="mdc-icon-button mdc-icon-button--display-flex" aria-label="Ion"><!--?lit$536929$--> <mwc-ripple unbounded=""> </mwc-ripple> <!--?lit$536929$--> <span><slot></slot></span> </button>.
I can do easy things like change the ha - card background color, but for that specific element is it possible? I've been trying root elements like button, ha-icon - button, mdc-icon-button, but nothing ever changes the title of that label.
Any expert with card mod able to help? I've spent over 8 hours on this small thing lol