LitElement 替换组件内的内容答案

【问题标题】：LitElement replace content inside componentLitElement 替换组件内的内容
【发布时间】：2021-12-13 09:36:34
【问题描述】：

所以我想在我的发光组件内有一个加载指示器，直到它加载。这是 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>

这是打字稿代码：

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>`
    }
}

目前，它附加了登录按钮。我希望它取代加载指示器。有推荐的方法吗？

【问题讨论】：

听起来你可能想使用until指令lit.dev/docs/templates/directives/#until

标签： javascript html typescript lit

【解决方案1】：

您可以通过自定义元素传递 Spinner 的 HTML 和信息，是否正在加载某些内容。

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

您将获得的 spinner-HTML 本身

unsafeHTML(this.innerHTML)

在您的自定义元素中。

然后您可以使用您的微调器并决定在 render() 函数中使用条件显示它。

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

在这个工作示例中，如果您删除“正在加载”属性，您将看到“已加载！”消息，否则您将看到作为微调标记传递给元素的内容： https://stackblitz.com/edit/lit-element-typescript-starter-pl3bij?file=my-element.ts

【讨论】：