Include Lovelace cards from within Custom Cards

Configuration Frontend
1

Hi everyone,
I’ve been working with Home Assistant for the past two years, experimenting with all sorts of different approaches.

I chose to have a very customizable dashboard (for many different reasons that go from experimenting to not wanting to be bound to any limitation), which is basically a custom grid, with a set of custom components.
I develop and maintain these and I’m quite happy with the flexibility it gives me to implement any custom behaviors quite easily. I can have any UI, call any service, and have any logic I pretty much want to.

Now, I’ve been actually trying to render an existing Lovelace card such as picture-entity from within these custom components. Since it’s a very simple component with already some custom behavior I was trying to use it but then render some other options on top of/next to it.

Of course I’ve tried a couple of approaches such as just adding the HTML component or even dynamically generate it like document.createElement('hui-picture-entity-card').

Is this currently a limitation or is there any way of implementing this?
I’m currently hacking my way through the Frontend repository to dig deeper into how I could do this but any past experiences from the community would be greatly appreciated!

2

I use this extensively to put things that aren’t entities in entity cards:

1 Like
3

Super thanks for the reply @tom_l!
Unfortunately I don’t think that applies to my case as the current limitation I’m trying to overcome is how to render an existing card out of a custom one. Literally, how to have my own custom card’s javascript code render (for example) a picture-entity card.

For example:

protected render() {
    return html`
      <div class='my-widget' id="some-id">
        <hui-picture-entity-card entity=${"entity.my-entity"}></hui-picture-entity-card>
      </div>
    `;
  }

I may also have missed something from your example :slight_smile:
Thanks!