Allow loading Home Assistant elements manually

[jackwilsdon]

It'd be nice to be able to use existing Home Assistant elements (e.g. ha-card, ha-fab, etc) when creating custom panels.

Code splitting / lazy loading currently means that this isn't possible, as Home Assistant's custom elements are only loaded when they are needed.

An API like this would be nice to have:

/**
 * Load a custom element.
 */
function loadCustomElement(name: string): Promise<void>;

Allowing the use of HA's elements like so:

@customElement("my-panel")
export class MyPanel extends LitElement {
    async firstUpdated() {
        await loadCustomElement("ha-card");
        this.requestUpdate();
    }

    render() {
        if (!customElements.get("ha-card")) {
            return html`Loading...`;
        }

        return html`
            <ha-card>...</ha-card>
        `;
    }
}

I'm not quite sure how we'd go about implementing this. A naive approach could be as follows:

const components = {
    "ha-card": () => import("./components/ha-card.ts"),
    "ha-fab": () => import("./components/ha-fab.ts"),
};

function loadCustomElement(name: string) {
    return components[name]();
}

I don't know how well this would play with Home Assistant's existing code splitting though - we might end up with a bundle per component (which is obviously bad).

[bramkragten]

I wrote a blog post about this a while back: https://developers.home-assistant.io/blog/2020/10/02/lazyMoreInfo