Frontend: Markdowncard h2 does not accept styling since 0.111

[hmmbob]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

The problem

With the latest update to 0.111, my markdown cards lost the ability to style the h2 headers with card-mod. Cant get any styling applied to the h2 tag.

Expected behavior

To style the h2 headers with custom css using card-mod.

Steps to reproduce

I've added a markdown card as listed below, using card-mod. Works in 0.110.4, breaks in 0.111.0

Environment

• Home Assistant release with the issue: 0.111.0
• Last working Home Assistant release (if known): 0.110.4 (didn't patch higher)
• Browser and browser version: Chrome 83.0 fully patched
• Operating system: Win10
• Using custom plugin lovelace-card-mod (there is an issue listed there as well), but I've got a feeling it might be related to this PR: https://github.com/home-assistant/frontend/pull/5904

Styling is also not applied when loading though the HA Android app.

State of relevant entities

n/a

Problem-relevant configuration

      - type: markdown 
        content: |
         ## In een oogopslag...
        style: |
         ha-card {
          margin: 0px 14px -5px 14px;
          box-shadow: none;
          --paper-card-background-color: rgba(0, 0, 0, 0.0)
          }
          h2 {
            font-size: 18px;
            font-weight: 400;
            padding-left: 10px;
            border-left: 3px solid rgba(81, 134, 236);
          }

Javascript errors shown in your browser console/inspector

None observed

Additional information

Rollback to 0.110.4 gave expected result, after browser refresh.

[joaofl]

Same here.

[DevMighty]

I can apply any other styling but h1 is impossible.

[bramkragten]

This is a custom card, please report this at the lovelace-card-mod repo.

[hmmbob]

@bramkragten we did, but based on the symptoms I have reason to believe it is a HA frontend issue that prevents the card from being styled. The markdown card is standard Lovelace.

[bramkragten]

We don't support styling of the markdown content... That functionality comes from the mod.

[hmmbob]

Fair enough.

[hmmbob]

@bramkragten Just to get back on this a little - the issue (even though not supported, fully understood) rises because of the use of !important in the markdown card h2 styling - which effectively prevents further styling.

Q: is the use of !important intended? It also overrides any styling a theme may apply...

https://github.com/home-assistant/frontend/blob/9ff2eece3aafe6e7ba26075aed2f981e12dbee1a/src/components/ha-markdown.ts#L72-L75

(FYI; the issue where no styling was applied at all anymore was fixed by correctly stepping through the shadow-root (or: better define the styling), but the h2 styling just won't get overriden).

[bramkragten]

@ludeeus can probably tell you why the !important was needed?