polymer - 带 Typescript 的 LitElement，无法访问 ShadowRoot dom

Question

我的查询选择器或 getElementById 总是返回 null，有人可以向我解释为什么吗？尝试了我能想到的一切(并在互联网上找到)但没有任何效果。

@customElement('my-element')
export class MyElement extends LitElement {

@property({type : String}) carousel = document.querySelectorAll("[data-target='carousel']");

connectedCallback(): void {
    super.connectedCallback();

    console.log(this.shadowRoot.querySelector('slider'));
    console.log(this.shadowRoot.querySelector('.slider'));
    console.log(this.shadowRoot.querySelector('#slider'));
    console.log(this.shadowRoot.getElementById('slider'));

    console.log(document.getElementById('slider'));

}

render(){
    return html`
        <div class="slider" id="slider">
            <ul class="carousel" data-target="carousel">

Answer 1

请尝试以下操作:

@customElement('my-element')
export class MyElement extends LitElement {

  get root() {
    return this.shadowRoot || this
  }

   render(){
    return html`<div class="slider" id="slider">...`
   }

   firstUpdated() {
    console.log(this.root.getElementById('slider')
   }
}