Shadow DOM styling not applied on first load

[TarheelGrad1998]

My Home Assistant version: 2022.8.3

My lovelace configuration method (GUI or yaml): yaml

What I am doing: I have small markdown cards I use for displaying weather info. I've styled it using card_mod to be smaller (reducing margins on p and h1 tags), which worked a few HA versions ago. Now it does not work on initial load, but will if you click to another dashboard tab and back (but this means my kiosks are never properly styled).

What I expected to happen: Styling to be applied on load

What happened instead: Style only applied when switching tabs

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
              - content: |
                  <ha-icon icon="mdi:sofa"></ha-icon>
                  # {{ states("sensor.living_room_temperature") }}&deg; 
                card_mod:
                  style:
                    .: |
                      ha-card {
                        height: 65px !important;
                        text-align: center;
                        }
                    ha-markdown:
                      $:
                        ha-markdown-element: |
                          p {
                            margin-bottom: 0px;
                          }
                          h1 {
                            margin-top: 0px;
                          }
                type: markdown
# End of code

Error messages from the browser console:

---

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.

[ildar170975]

Check for advices here: https://github.com/thomasloven/lovelace-card-mod/issues/204 https://github.com/thomasloven/lovelace-card-mod/issues/208

[TarheelGrad1998]

Thanks, the below fixed it. Works perfect now.

               ha-markdown $: | 
                  p {
                    margin-bottom: 0px;
                  }
                  h1 {
                    margin-top: 0px;
                  }