Trying to target inside shadowRoot fails

[pegasusvelata]

Hi,

I'm trying to target one of the div elements inside one of the custom web components for the mini-climate-card ( https://github.com/artem-sedykh/mini-climate-card ) but it's not working.

I've tried every combination of shadowRoot selector that I can think of, nothing worked. I've attached an image of the DOM structure.

Thanks.

[dcapslock]

Are you aware of the uix_path() DOM inspection helper?

[dcapslock]

Showing your yaml will help me understand what you are trying to achieve.

Also, try prepend: true in your uix config.

[pegasusvelata]

This is my card:

type: custom:mini-climate
entity: climate.acbirou
uix:
  debug: true
  style:
    mc-target-temperature $: |
      div.controls-wrap { color:orange; height:200px; }

I've tried prepend: true|false, didn't work

[dcapslock]

OK. Had to delve in and debug this. The issue is that mini-climate's mc-target-temperature component extends from Lit's own scoped custom element registry and will not be available in the global Home Assistant poly filled custom registry.

This means that when UIX awaits the mc-target-temperature to be defined, which it needs to do, it never resolves and eventually times out (as per which you see with debug UIX found no elements). Same will go for all the custom elements except for the main card.

I will look into how the Lit custom element registry mixin works and see if UIX can handle using the local whenDefined() rather than global.

[dcapslock]

So looks like this is pretty straightforward but as it s at the heart of UIX, needing to test carefully and run all tests.

[dcapslock]

See #512

[dcapslock]

🎉 This issue has been resolved in version 8.0.1-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[pegasusvelata]

I updated to 8.0.1-beta.6 and that fixed the issue.

Thank you very much for the fix.

[dcapslock]

Great to hear.