How to get child element by id ?

How to get a specific child element by id. In the following example I would like to get the canvas child element in order to draw something on it:

class MyElement extends LitElement {

      _render() {
        return html`
            <canvas id="draw"></canvas>
        `;
      }

}

With Polymer elements I used to get the child element with this.$.draw but it’s not working with LitElement. What is the workaround ?

[Lodin]

this.shadowRoot.getElementById('draw') should work

[Link2Twenty]

I think, generally, it’s better to use this._root as it accounts for shadydom, as well as shadowdom, also you can use this.renderComplete.then in your constructor to wait until the first render is complete.

class testElement extends LitElement {
  constructor() {
    super();
    this.renderComplete.then(()=>{
      console.log(this._root.querySelector('#draw'));
    })
  }
  _render() {
    return html`<canvas id="draw"></canvas>`;
  }  
}
	
customElements.define('test-element', testElement);