No injection of card-mod styles beyond the first level of ha-markdown cards

[parautenbach]

My Home Assistant version: 2023.2.3

My lovelace configuration method (GUI or yaml): YAML

What I am doing: Applying a custom style by colouring alternating rows of a table in a markdown card. The example YAML below precedes the big UI changes of 2022.12. I know I'll need to change some variables.

The problem seems to be that the <card-mod> element is only injected at the top. Usually, there will be a <card-mod> element at each level.

What I expected to happen: A blue header, with white text, and a table where every other row has a background colour.

What happened instead: Nothing.

Minimal steps to reproduce:

        card_mod:
          style:
            ha-markdown:
              $:
                ha-markdown-element: |
                  table {
                    border-spacing: 0;
                    width: 100%;
                    padding: 8px;
                    border-radius: var(--ha-card-border-radius);
                  }
                  th {
                    background-color: var(--state-icon-color);
                    color: white;
                    padding: 4px;
                  }
                  th:first-child {
                    border-top-left-radius: min(var(--ha-card-border-radius)/2, 5px);
                  }
                  th:last-child {
                    border-top-right-radius: min(var(--ha-card-border-radius)/2, 5px);
                  }
                  td {
                    padding: 4px;
                  }
                  tr:nth-child(even) {
                    background-color: var(--table-row-background-color);
                  }

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.

[parautenbach]

I think this comment in the docs might apply:

NOTE 2: Following on the note above; due to the high level of load order optimization used in Home Assistant, it is not guaranteed that the #shadow-root or the mwc-button actually exists at the point in time when card-mod is looking for it. If you use the second method above, card-mod will be able to retry looking for #shadow-root at a later point, which may lead to more stable operation.

The reason is that after my latest upgrade of HA core from 2023.2.3 through 2023.3.1 to 2023.3.6, I now see the table rendered sometimes. I guess it's possible that it happened before too, but that I didn't notice it, although I'm pretty sure it's not the case given the time I've spent on this issue. I've scanned the last 5 frontend releases to see if I can spot anything that changed, but I'm not very up to date with all the latest libs etc. being used here. I couldn't find anything obvious that's related.

My understanding then is that the styling actually works, but the <style> element gets removed at some point, perhaps as bit and pieces are still loading and some JS gets run. It's hard to pinpoint.

I'd be happy to close this issue and log it against the frontend code, but I suspect it will not be entertained for a third-party integration issue. I'll leave this issue open for more comments or perhaps more information or confirmation.

[hawkeye217]

I've noticed this same behavior since 2023.4.x.

Editing the dashboard and saving causes the styles to the markdown card to be applied. Upon a reload of the page, styles are not applied.

[thomasloven]

Please try version 3.4.0 and let me know if this is still an issue.

[ildar170975]

@thomasloven I do not observe issues with markdown with 3.4.1. Both variants give same stable result:

type: vertical-stack
cards:
  - type: markdown
    content: |
      # ha-markdown $
    card_mod:
      style:
        ha-markdown $: |
          h1 {
            font-size: 6px;
            color: cyan;
          }
        .: |
          ha-card {
            background-color: red;
          }
  - type: markdown
    content: |
      # ha-markdown:
      # $:
    card_mod:
      style:
        ha-markdown:
          $: |
            h1 {
              font-size: 6px;
              color: cyan;
            }
        .: |
          ha-card {
            background-color: red;
          }

Earlier I reported several times that only the 1st variant gives a stable result.

[parautenbach]

@thomasloven thank you, this is fixed!

My former solution can be restored to its full glory. :-D

  - type: markdown
    content: >
      Domain | Count
         :---|---:
      {% for domain in states | groupby('domain') -%}
        {%- set name = domain[0].replace('_', ' ') | title -%}
        **{{ name }}** | {{ states[domain[0]] | count }}
      {% endfor %}
      **Total** | {{ states | count }}
    card_mod:
      style:
        ha-markdown:
          $:
            ha-markdown-element: |
              table {
                border-spacing: 0;
                width: 100%;
                padding: 8px;
                border-radius: var(--ha-card-border-radius);
              }
              th {
                background-color: var(--state-icon-color);
                color: white;
                padding: 4px;
              }
              th:first-child {
                border-top-left-radius: min(var(--ha-card-border-radius)/2, 5px);
              }
              th:last-child {
                border-top-right-radius: min(var(--ha-card-border-radius)/2, 5px);
              }
              td {
                padding: 4px;
              }
              tr:nth-child(even) {
                background-color: var(--secondary-background-color);
              }