Styles in Shadow-DOM are applied inconsistent

martiesim commented 1 year ago

My Home Assistant version: 2022.9.7

My lovelace configuration method (GUI or yaml): yaml

What I am doing: I'm using card-mod to ~abuse~ highly customize my frontend. I'm using a markdown card to add a custom header to my dashboard but some styles are not applied on first load.

What I expected to happen: I expect the font color to be applied just like the other styles are.

What happened instead: But when opening a page for the first time since the webapp was loaded, the color is not applied. Only when the page is selected for a second time, the color is applied.

First opening of a page:

Second opening (without refreshing):

Minimal steps to reproduce:

- type: markdown
    content: |
        ## Flur
    style:
        .: |
            :host{
                position: absolute;
                top: -4px;
                left: 0px;
                width: 100%;
                box-sizing: border-box;
                background-color: var(--app-header-background-color);
                margin: 0 !important;
            }
            :host::before{
                position: absolute;
                left: -4px;
                top: 0;
                width: 4px;
                height: 100%;
                background-color: var(--app-header-background-color);
            }
            :host::after{
                position: absolute;
                right: -4px;
                top: 0;
                width: 4px;
                height: 100%;
                background-color: var(--app-header-background-color);
            }
            ha-card{
                box-shadow: none;
                background: transparent !important;
            }
        ha-markdown:
            $: |
                h2{
                    color: var( --app-header-selection-bar-color, var(--app-header-text-color, #fff) );
                }

Open the page. Select the view with the customized markdown card in the header. Observe the text color not being applied. Select another view in the header. Select the view with the customized markdown card in the header again. Observe the text color being applied.

Error messages from the browser console: none

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.

Additional: As the text color is to be applied in a shadow-dom and it's the only style that is not properly applied on the first try, I suspect that the shadow-dom is not handled properly.

Quick Summary of whats been found:

# option 1
style:
    element $:
# option 2
style:
    element:
        $:

For markdown cards, option 1 does work, but option 2 does not work properly (see error description above) but for hui-element it's switched and option 1 doesn't work properly while option 2 does. Looking at the documentation, both options should be equivalent.

ildar170975 commented 1 year ago

There are at least THREE closed issues about the very same problem. Sometimes it is better to use "search" first. Try using this code:

    card_mod:
      style:
        ha-markdown $: |
          h123 {
            .....
          }
        .: |
          ha-card {
            .....
          }

martiesim commented 1 year ago

I did use "search" first, and yes, I did remove "is:open" from the search bar. I'm not that much of an idiot, thanks.

With that out of the way, thank you very much for your fast help. This was an easy change that fixed the problem for me.

However that behaviour is not documented in the readme. In fact the documentation makes it seem like both options would be equivalent and they were for quite some time. So I think some action should be taken but also I don't think I should decide whether the behaviour is considered a bug or just needs documenting, so I'll leave this issue open for a contributor to decide.

ildar170975 commented 1 year ago

IMHO you are right, this is probably a glitch. There is a similar bug https://github.com/thomasloven/lovelace-card-mod/issues/177 with hui-element: This works erratic:

    card_mod:
      style:
        hui-element $: |
          hui-generic-entity-row {
            color: red;
          }

This works stable:

    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: red;
            }

In case of markdown - it is just opposite ))).

I suggest you to rename the issue to reflect a markdown.

martiesim commented 1 year ago

I updated the title and my first post to summarize.

ildar170975 commented 1 year ago

Do not think you should mention hui-element issue in the 1st post. That is just an example and may not be related; also, that is probably related to using mod-card. IMHO you should only mention markdown in the 1st post & the title.

thomasloven / lovelace-card-mod

Styles in Shadow-DOM are applied inconsistent #226