JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="alert('The hotkey was called')" data-hotkey="d">
  This button has a hotkey d
</button>

<template id="my-el-template">
  <style>
    input {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

  </style>
  <input type="text" />
</template>

<my-el />

<script type="module">
    import {
    install
  } from 'https://cdn.jsdelivr.net/npm/@github/hotkey@3.1.0/dist/index.js'

  for (const el of document.querySelectorAll('[data-hotkey]')) {
    install(el)
  }

  class MyEl extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({
        mode: 'open'
      });
      const template = document.getElementById('my-el-template');
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this.input = this.shadowRoot.querySelector('input');
      this.input.addEventListener('input', this.handleInputChange.bind(this));
    }

    handleInputChange(event) {
      const inputValue = event.target.value;
      document.dispatchEvent(new CustomEvent('input-change', {
        detail: inputValue
      }));
    }
  }

  customElements.define('my-el', MyEl);

  document.addEventListener('input-change', event => {
    console.log(event.detail)
  })

  document.addEventListener('keydown', event => {
    console.log('keydown', event)
  })
</script>