Button

<my-button>Hello</my-button>

<script>
  class MyButton extends HTMLElement {
    #internals

    constructor() {
      super()
      const shadow = this.attachShadow({ mode: 'open', delegateFocus: true })
      shadow.innerHTML = '<div tabindex="0"><slot/></div>'

      this.#internals = this.attachInternals()
      this.#internals.role = 'button'

      this.addEventListener('keydown', this.#onKeydown)
    }

    #onKeydown(e) {
      if (['Enter', ' '].includes(e.key)) this.dispatchEvent(new MouseEvent('click'))
    }
  }
  customElements.define('my-button', MyButton)
</script>