LitElement 替换组件内的内容

Question

So I want to have a loading indicator inside my lit component until it has loaded. This is the HTML:

            <login-element class=" flex justify-center items-center">
                <div class="animate-spin rounded-full h-11 w-11 border-t-2 border-b-2 border-purple-500"></div>
            </login-element>

Here is the typescript code:

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('login-element')
export class LoginElement extends LitElement {

    override createRenderRoot(){ return this; }

    override render() {
        return html`<a href="/auth0" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Sign In</a>`
    }
}

Currently, it appends the sign-in button. I want it to replace the loading indicator. Is there a recommended way of doing it?

Answer 1

You can pass the HTML for the Spinner and the info, whether something is loading via the custom element.

<login-element loading><b>Spinner-Element</b></login-element>

The spinner-HTML itself you'll get via

unsafeHTML(this.innerHTML)

inside your custom-element.

Then you can use your spinner and decide showing it with a conditional inside the render() function.

  @property({ type: Boolean })
  loading = false;
  
  render() {
    return html`     
      ${this.loading ? html`
      Showing spinner: ${unsafeHTML(this.innerHTML)}`: 'loaded!'}
    `;
  }

In this working example, if you remove the "loading" attribute, you'll see the "loaded!" message, otherwise you'll see what you passed into the element as spinner-markup: https://stackblitz.com/edit/lit-element-typescript-starter-pl3bij?file=my-element.ts