Re-using existing frontend components in Lovelace card editor

I’m trying to build a card editor for my Lovelace card and want to re-use the ha-entity-picker component, but it doesn’t seem to work. Nothing is rendered, but I can see the element if I manually inspect the DOM (so it’s not a cache issue).

I would expect that something like this would work:

  render() {
    if (!this.hass) {
      return html``;
    return html`
      <div class="card-config">
        <div class="side-by-side">

Do I need to import the component somehow?


Does anyone know if there is a way to do this yet? It seems possible to use the paper components but not any of the ha- or hui- ones. Reuse would make it much easier and cleaner to create custom cards

Good question. I would love to know how to re-use ha components as well. instead of drawing them…

I have seen some developers using customElements.get('ha-entity-picker') to try to reuse these elements, however, at least on my instance, it returns undefined, so that does not seem to work.
But I would also absolutely love this, it would make developing lovelace cards so much easier.

Hi @virhonestum, can it be fixed in this PR?

Yes, partially. It does seem to expose the multiple entities select config component. However the other components are most likely still unavailable.

Hi @virhonestum, I think that I will use just this for picking the entities. Apparently, it works quite well.
I’m not sure how it will behave in different browsers though.

     <paper-input-container >
      <ha-icon icon="mdi:home" slot="prefix"></ha-icon>
        <input type="text" value="${this.topic}" slot="input" list="browsers" autocapitalize="none">
        <paper-icon-button slot="suffix" icon="mdi:plus" title="Add" @click=${this._addEntity}></paper-icon-button>
        <datalist id="browsers">
              ${Object.keys(this.hass.states).sort().map(entId => ct.LitHtml`
                   <option value=${entId}>${this.hass.states[entId].attributes.friendly_name || entId}</option>