Event handling

Till now, we have only looked into button-click events inside our Web Components. This section deals with event handlers from a different perspective.

Let's say we have a Web Component <custom-clicker> that has a button and a number that shows the number of times that button has been clicked. Let's take a look at the definition of this Web Component:

constructor() {

  // We are not even going to touch this.
  super();

  // Initially, the list is empty
  this._num = 0;

  // lets create our shadow root
  this.shadowObj = this.attachShadow({mode: 'open'});
  this.render();
}

We are setting the value of _num to 0. The rest is the same as usual:

render() {
  this.shadowObj.innerHTML = this.getTemplate();
}

getTemplate() {
  return `
    <div class="custom-clicker__container">
      <div class="custom-clicker_num">${this.getTimesClicked...