Lit Element中query()返回null：如何等待元素渲染至DOM？

当使用@query('#first')装饰器获取元素时，若在组件未完成渲染时访问this._first，会得到null。可以通过以下几种方式等待DOM渲染完成，确保元素可用：

• 使用firstUpdated()生命周期钩子
  这个钩子仅在组件首次渲染完成后触发一次，此时DOM已经完全生成，可安全访问@query装饰的元素：

  import { LitElement, html, query } from 'lit';
  import { customElement } from 'lit/decorators.js';
  
  @customElement('my-element')
  class MyElement extends LitElement {
    @query('#first')
    _first;
  
    firstUpdated() {
      super.firstUpdated();
      // 此处this._first必然指向目标DOM元素
      this._first.textContent = 'DOM已就绪';
    }
  
    render() {
      return html`<div id="first"></div>`;
    }
  }
  

• 利用updated()生命周期钩子
  若需要在每次组件更新后都检查元素状态，可使用updated()。如果只需要处理首次渲染，可结合标志位判断：

  private _isFirstRender = true;
  
  updated(changedProperties) {
    super.updated(changedProperties);
    if (this._isFirstRender && this._first) {
      // 首次渲染后的操作
      this._first.focus();
      this._isFirstRender = false;
    }
  }
  

• 等待renderComplete Promise
  组件实例的renderComplete属性是一个Promise，会在渲染完成且DOM更新后resolve。可通过async/await等待：

  async handleButtonClick() {
    await this.renderComplete;
    // 此时DOM已更新，可安全操作元素
    this._first.style.color = 'blue';
  }
  
  render() {
    return html`
      <button @click=${this.handleButtonClick}>操作元素</button>
      <div id="first"></div>
    `;
  }
  

• 检查模板中的元素存在性
  确认render()方法返回的模板中确实存在id="first"的元素，若使用条件渲染，需确保触发元素渲染的条件为true时再访问：

  render() {
    return html`
      <!-- 确保showFirst为true时元素才会渲染 -->
      ${this.showFirst ? html`<div id="first">条件渲染的元素</div>` : ''}
    `;
  }
  

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