JavaScript click event does not work on div but mouseenter can?

I have read and upvoted this question with the same title, but the problem I encountered differs.

In my scenario, if I replace the click event name by either mouseleave or mouseenter the event can fire with anything else the same.

HTML:

const template = `
  <div id="tools">
      <div id="container">
          <div class="a" id="a" title='a'></div>
          <div class="b" id="b" title='b'></div>
      </div>
  </div>
`;

The JS function is called in the construction function of a class that extends a WebComponent HTMLElement:

called_in_constructor(){
    this.attachShadow({ mode: "open" });
    // const style = document.createElement("style");
    // style.textContent = styled({});
    // this.shadowRoot.appendChild(style);
    this.shadowRoot.innerHTML += template;
    this.shadowRoot
      .getElementById("a")
      .addEventListener("click", () => this.write_some_log());
}

write_some_log(){
  console.log('click triggered')
}

When I replace "click" with "mouseenter" I can see the 'click triggered' message in the Devtool console after mouse entering the SVG(added using the styled function), but it doesn't work for the click event.