How to get Element by ID?

How to get Vaadin component from javascript ?

I have created a HTML button and two vaadin buttons in polymer element js.
HTML button event is working fine, but click event is not working for vaadin button in javascript and also ‘document.getElementById’ is not working.
So how can I get vaadin element by id through javascript?
Can we handle click event through javascript ?

import { PolymerElement } from "@polymer/polymer/polymer-element.js";
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
import "@vaadin/vaadin-grid/vaadin-grid.js";
import "@vaadin/vaadin-grid/vaadin-grid-column.js";


class ListView extends PolymerElement {
  static get template() {
    return html`
     
      <input type="button" value="submit" on-click="handleClick"/>
       
      <vaadin-button id="btnAdd" value="click me!" (click)="handleClick1()" >Add</vaadin-button>
      <vaadin-button id="btnCancel" value="click me!" >Cancel</vaadin-button>      
    `;
  }
   
  
  handleClick() {
      console.log('Button was clicked...');
      alert('Hello'); 
    }
  
  handleClick1() {
      console.log('Vaadin Button was clicked...');
      alert('Hello'); 
    }
   
  
  document.getElementById("btnCancel").onclick = function() {myFunction()};

  myFunction() {
    alert("called my function");
  }

  static get is() {
    return "list-view";
  }

  static get properties() {
    return {
      activeItem: {
        observer: "_activeItemChanged",
      },
    };
  }

  _activeItemChanged(item) {
    this.$.list.selectedItems = item ? [item]
 : [];
  }
}


customElements.define(ListView.is, ListView);