Easily add listeners to the document
object, and have them removed when the
component disconnects.
npm install lit-document-event
<document-event eventname="keydown" @event=${this.handleKeyDown}></document-event>
It doesn't matter where in your template you put this component. It doesn't
have a UI, it just adds a listener for the desired event and emits an event on
the component, so you can easily bind to it with lit-html (with the
@event=${this.myEventHandler}
syntax). When the component is disconnected,
the listener will be removed.
For more info, check the docs.