LitElement с Typescript, не может получить доступ к shadowRoot doms

Question

Мой селектор запросов или getElementById всегда возвращает ноль, может кто-нибудь объяснить мне, почему? перепробовал все, что могу придумать (и нашел в интернете) но ничего не работает.

@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')
   }
}