LitElement with Typescript, cannot access shadowRoot doms

Admin 1
Viewed 1129

My query selector or getElementById always returns null, can someone explain to me why? tried everything I can think off (and found on the internet) but nothing works.

@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">
shadow-dom polymer lit-element
1 Answers

Please try with the following:

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