connectedCallback () не может получить доступ к собственным элементам DOM

Question

console.log возвращает null. Невозможно получить доступ к теневому элементу DOM после рендера.

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

Когда вызывается connectedCallback(), ваш компонент еще не отображается, потому что render() еще не вызван. Вместо этого вы должны использовать обратный вызов жизненного цикла firstUpdated(). Смотрите эту страницу для более подробной информации: https://lit-element.polymer-project.org/guide/events#where -to-add-your-event-listeners