search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.12k stars 167 forks source link

card-mod-theme: When using card-mod-view it seems like it allows css classes to escape the "hui-view" scope? Is this intended? Why use card-mod-root? #169

Closed MadMaxMcKinney closed 2 years ago

MadMaxMcKinney commented 2 years ago

This might be me not understanding the use-case associated with card-mod-view but when I added it to my project I found that it applies styles outside the scope of the hui-view domain.

I interpreted the content in the wiki (https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#special-theme-variables) to mean that the css classes would be scoped. However, if I do something like this:

# Card Mod
  card-mod-theme: "M Dark Theme"

  card-mod-view: |
        hui-view {
              padding: 16px;
        }
        app-header {
             background: red
        }

  card-mod-card: |
        ha-card.type-markdown {
              background: transparent;
              box-shadow: none;
        }
        ha-card ha-markdown.no-header {
              padding-top: 24px;
              padding-left: 0px;
              padding-right: 0px;
        }

I see that the app-header element gets the background: red style added (granted it gets overridden by a more specific selector). Am I missing something? When should I use card-mod-root vs card-mod-view if the view selector is applying across the page?

thomasloven commented 2 years ago

To be honest, I just added stuff without really thinking about it at some point.

hui-view and app-header are in the same scope in the shadowDOM, so it's expected that they can affect each other. If you want to go deeper into the app-header, though, e.g. for modifying individual icons you'll need to start from "higher up" in the chain, i.e. hui-root through card-mod-root-yaml.