LitElement组件渲染时替换内部预置加载指示器的实现方法问询

问题原因 #

你当前出现内容追加的核心原因是重写了createRenderRoot返回this，关闭了Lit默认的Shadow DOM，此时Lit会把render函数返回的内容直接追加到组件元素的现有子节点末尾，因此预置的加载指示器和渲染出的登录按钮会同时显示。

官方推荐实现方案 #

方案1：恢复默认Shadow DOM（最优解，无需修改外部HTML）

这是Lit官方针对渐进式加载占位场景的原生支持方案，仅需要删除组件中重写createRenderRoot的代码即可：

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

@customElement('login-element')
export class LoginElement extends LitElement {
    // 删除createRenderRoot重写代码，使用默认Shadow DOM

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

实现逻辑：

• 组件代码未加载完成、元素未升级时，<login-element>会被浏览器识别为普通未知标签，内部的加载指示器直接正常渲染
• 组件加载完成、元素升级后，默认启用的Shadow DOM会直接覆盖原有内容的展示，预置在light DOM中的加载指示器因为没有对应插槽接收，不会被渲染，自动实现替换效果

方案2：必须关闭Shadow DOM场景的适配

如果因为需要复用全局样式（比如你用到的Tailwind样式）必须保留createRenderRoot返回this的配置，可以通过生命周期钩子在首次渲染前清空原有子节点：

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

@customElement('login-element')
export class LoginElement extends LitElement {
    // 标记是否已经完成首次渲染前的清理
    @state()
    private _hasClearedPlaceholder = false;

    override createRenderRoot(){ return this; }

    override willUpdate() {
        // 仅首次渲染前执行清理，避免后续更新重复清空内容
        if (!this._hasClearedPlaceholder) {
            this.replaceChildren();
            this._hasClearedPlaceholder = true;
        }
    }

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

内容的提问来源于stack exchange，提问作者user3384741