Lit Element组件内为元素加事件监听器遇Shadow DOM查找问题

我参考了多个相关示例但均无效。我创建了一个简单的Lit组件，想要为ID为myButton的按钮添加事件监听器，但控制台返回null，无法在Shadow DOM中找到该按钮。请问我哪里出错了？

原代码如下：

import { html, LitElement } from "lit";

class MyElement extends LitElement {

  connectedCallback() {
    super.connectedCallback();
    var buttonElement = this.shadowRoot.getElementById("myButton");
    console.log(buttonElement);
  }

  render() {
    return html` <button id="myButton">Click</button>`;
  }
}

customElements.define("my-element", MyElement);

更新：将代码放在firstUpdated钩子中可以正常运行：

firstUpdated() {
  var buttonElement= this.shadowRoot.getElementById("myButton");
  console.log(buttonElement);
}

问题核心在于Lit组件的生命周期执行顺序：

• connectedCallback触发时机是元素被挂载到DOM树，但此时Lit还未完成首次渲染，Shadow DOM内的按钮元素尚未生成，所以查询结果为null。
• firstUpdated是Lit在组件首次渲染完成、DOM更新后才触发的钩子，此时Shadow DOM已经包含了渲染出的按钮，自然能正确获取到元素。

另外推荐两种更符合Lit最佳实践的写法：

1. 使用@query装饰器自动获取元素 #

import { html, LitElement } from "lit";
import { query } from "lit/decorators.js";

class MyElement extends LitElement {
  @query("#myButton")
  myButton;

  firstUpdated() {
    this.myButton.addEventListener('click', () => {
      console.log('按钮被点击');
    });
  }

  render() {
    return html` <button id="myButton">Click</button>`;
  }
}

customElements.define("my-element", MyElement);

2. 模板内直接绑定事件（最推荐） #

import { html, LitElement } from "lit";

class MyElement extends LitElement {
  handleClick() {
    console.log('按钮被点击');
  }

  render() {
    return html` <button id="myButton" @click=${this.handleClick}>Click</button>`;
  }
}

customElements.define("my-element", MyElement);

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