FocusTrap custom component using LitElement

FocusTrap.js

import {
  html,
  LitElement
} from "https://unpkg.com/@polymer/[email protected]/lit-element.js?module";

const KEYCODE_TAB = 9;

class FocusTrap extends LitElement {
  constructor() {
    super();

    this.handleFocus = this.handleFocus.bind(this);

    this.addEventListener("keydown", this.handleFocus);
  }

  createRenderRoot() {
    return this.attachShadow({ mode: "open", delegatesFocus: true });
  }

  handleFocus(e) {
    var focusableEls = this.querySelectorAll(
        'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
      ),
      firstFocusableEl = focusableEls[0],
      lastFocusableEl = focusableEls[focusableEls.length - 1];

    var isTabPressed = e.key === "Tab" || e.keyCode === KEYCODE_TAB;

    if (!isTabPressed) {
      return;
    }

    if (e.shiftKey) {
      /* shift + tab */ if (document.activeElement === firstFocusableEl) {
        lastFocusableEl.focus();
        e.preventDefault();
      }
    } /* tab */ else {
      if (document.activeElement === lastFocusableEl) {
        firstFocusableEl.focus();
        e.preventDefault();
      }
    }
  }

  render() {
    return html`
			<div class="trap">
              <slot></slot>
		    </div>
		`;
  }
}

customElements.define("focus-trap", FocusTrap);