Почему срабатывает событие до инициализации элемента

Почему при клике на кнопку срабатывает EventListener:click -> clickHandler, который инициализируются после создания компонента? В тоже время если нажать любую клавишу на клавиатуре
для создания элемента, то EventListener:keydown -> keyHandler не срабатывает

Пример:

class MyComponent extends HTMLElement {
 constructor() {
   super() 

   this.keyHandler = this.keyHandler.bind(this)
   this.clickHandler = this.clickHandler.bind(this)

   this.attachShadow({mode: "open"}).innerHTML = "hello"
 }

 keyHandler(event) {
   const {key} = event

   if(key === "Escape") {
     alert("keydown:esc")
   }
 }
clickHandler(event) {
   const {target} = event 

   if(this.contains(target) === false) {
     alert("outside")
   }
 }
 keyDownChanged(value) {
   value === true
     ? window.addEventListener("keydown", this.keyHandler)
     : window.removeEventListener("keydown", this.keyHandler)
 }
 outsideClickChanged(value) {
   value === true
      ? window.addEventListener("click", this.clickHandler)
     : window.removeEventListener("click", this.clickHandler)
 }
 static get observedAttributes() {
   return ["keydown", "clickoutside"]
 }
 attributeChangedCallback(name, oldValue, newValue) {
   const value = !!newValue // to bool

   switch(name) {
     case "keydown":
       this.keyDownChanged(value)
       break;
     case "clickoutside":
       this.outsideClickChanged(value)
       break;
   }
 }
}

customElements.define("my-element", MyComponent)

function createCustomElement() {
  const element = document.createElement("my-element")

  element.setAttribute("keydown", true)
  element.setAttribute("clickoutside", true)

  document.body.appendChild(element)
}

const btn = document.querySelector("button")
btn.addEventListener("click", createCustomElement)
window.addEventListener("keydown", createCustomElement )