connectedCallback() cannot access self DOM elements

Question

console.log returns null. It's unable to access to shadow DOM element after render.

class App extends LitElement{
 render(){
    return html`
        <div class = "cont"> lorem </div>
    `
  }

connectedCallback(){
  super.connectedCallback()  
  console.log(this.shadowRoot.querySelector(".cont"))
   }
}

customElements.define('example-el', App)

Answer 1

When connectedCallback() is called, your component is not yet rendered because render() has not yet been called. You should use the firstUpdated() lifecycle callback instead. See this page for more details: https://lit-element.polymer-project.org/guide/events#where-to-add-your-event-listeners