window.customElements.define('dvorak-only', class extends HTMLElement {
    isDvorak = false;
    
    isDvorakSpan = null;
  
    constructor() {
      super();
    
      setInterval(this.checkDvorak, 200);
    }
  
    checkDvorak = () => {
      navigator.keyboard.getLayoutMap().then(layoutMap => {
          this.isDvorak = layoutMap.get("KeyQ") === "'"
              && layoutMap.get("KeyW") === ","
              && layoutMap.get("KeyE") === "."
              && layoutMap.get("KeyR") === "p"
              && layoutMap.get("KeyT") === "y"
              && layoutMap.get("KeyY") === "f";
        
          this.isDvorakSpan.innerText = this.isDvorak ? 'Using dvorak' : 'not using dvorak';
      });
    }
    
    connectedCallback() {
      const shadow = this.attachShadow({ mode: "open" });
      
      const wrapper = document.createElement('div');
      
      this.inputSlot = document.createElement('slot');
      this.inputSlot.setAttribute('name', 'input');

      const input = document.createElement('input');
      input.setAttribute('type', 'text');

      this.inputSlot.appendChild(input);
      
      this.isDvorakSpan = document.createElement('span');
      this.isDvorakSpan.innerText = this.isDvorak ? 'Using dvorak' : 'not using dvorak';
        
      wrapper.appendChild(this.isDvorakSpan);
      wrapper.appendChild(this.inputSlot);

      shadow.appendChild(wrapper);

      this.inputSlot.assignedNodes()[0].addEventListener('keydown', (e) => {
        if (!this.isDvorak) {
          e.preventDefault();
        }
      });
    }
  });