How to change `energy-date-selection`?

[Mrtenz]

I'm trying to add some styles to an energy-dete-selection card, but it seems like the styles aren't being applied. I tried messing with the selector, shadow roots, etc., but I can't get it to work.

My card looks like this:

- type: custom:mod-card
  card:
    type: energy-date-selection
  card_mod:
    style:
      hui-energy-date-selection-card $:
        hui-energy-period-selector $: |
          .row {
            flex-direction: row !important;
          }

What should the selector look like for this card? It looks like this in the DOM:

[ildar170975]

This is neither a bug nor a FR. It's a question. Please ask similar questions in a dedicated card-mod community thread. Leave GitHub for bugs & FRs only.

[Mrtenz]

Well, considering that my snippet does not work, this may be a bug.

[ildar170975]

And this may be a wrong usage too. OK, as you like.

[Mrtenz]

Then please tell me what the right usage is. 😄

[Mrtenz]

If I use this (hui-energy-period-selector without $):

type: custom:mod-card
card:
  type: energy-date-selection
card_mod:
  style:
    hui-energy-date-selection-card $:
      hui-energy-period-selector: |
        .row {
          flex-direction: row !important;
        }

A card-mod DOM node is created, with the proper style attached to it, but this doesn't work since .row is in a shadow root. When using hui-energy-period-selector$ no card-mod node is created inside it at all (but it works for hui-energy-date-selection-card).

[thomasloven]

This is now explained better in the readme.