As kindly suggested by @Ildar_Gabdullin I am reposting my question in this thread
I am trying to use mod-card in order to style a button-card (this is an example, there are other cards as well)
This is the element I want to style (the text “date here”):
Its position in the DOM is
My understanding is that I have, starting from <button-card>, the following structure:
- (it does not matter until
<ha-card>) -
<ha-card>with a shadow-root, so I need to address it asha-card$ - a
<div> - another nested
<div>that contains the text I want to style
The code I imagined would work:
- type: custom:button-card
name: >
[[[
return "date here"
]]]
view_layout:
grid-area: date
card_mod:
style:
ha-card$:
div: |
div {
font-size: 100px;
color: red;
}
Well, it does not 
, the style is not applied. Is this how I am expected to code nested elements?
Note: a basic
card_mod:
style: |
ha-card {
color: red;
}
works fine, so mod-card is correctly installed.