Not working with Nested Shadow root with lovelace-more-info-card

[SquirrelsMcGee]

My Home Assistant version: 2024.4.3

What I am doing: Trying to style a more-info-card from https://github.com/thomasloven/lovelace-more-info-card

What I expected to happen: I expected to be able to traverse the shadowroot tree

What happened instead: Styling of items inside of nested shadowroot nodes doesn't work at all? As far as I can tell i've followed the example guide to the letter, I've tried as many combinations of syntax as i could find documented

Like this

parent$: |
  child$: |

And these

parent$child$: |
parent$ child$: |
parent $ child $: |

and nothing works

Minimal steps to reproduce:

• Using the more-info-card
• Using the following yaml configuration for the card

type: custom:more-info-card
title: Room Light
entity: light.ikea_of_sweden_tradfri_bulb_e27_ws_globe_1055lm_light
card_mod:
  debug: true
  style: |
    /** These work just fine */
    ha-card { text-align: center; }
    state-card-content { display: none; }

    more-info-content$: |
      /** This doesn't work */
      more-info-light$: |
        .controls {
          background: blue !important;
        }
      /** This works though */
      * { background: red !important; }

This is what the DOM looks like

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.

[SquirrelsMcGee]

I missed a detail in the documentation... 🤦‍♂️

Resulting in the now working configuration

card_mod:
  debug: true
  style:
    .: |
      state-card-content { display: none }
      ha-card { text-align: center; }
    more-info-content$:
      more-info-light$: |
        ha-more-info-state-header { display: none !important; }
        ha-attributes { display: none !important; }

[SquirrelsMcGee]

Closing as not an issue