LitElement: IronA11yKeysBehavior
Replace IronA11yKeysBehavior with keydown event listener when migrating from PolymerElement to LitElement
Published in
1 min readApr 16, 2019
The Polymer library provides the IronA11yKeysBehavior
for easy handling of keyboard events. For example, the following would trigger the save()
method when the user pressed Enter:
class MyElement extends mixinBehaviors([IronA11yKeysBehavior],
PolymerElement) {
...
get keyBindings() {
return {
enter: 'save',
};
}
As you can’t apply IronA11yKeysBehavior
mixin to a LitElement
, your element must implement the behavior itself. Luckily, this is as easy as before:
class MyElement extends LitElement {
...
protected firstUpdated() {
this.addEventListener('keydown', this.save);
}
}
Alternatively, you can bind the handling also directly to a specific element in the template:
class MyElement extends LitElement {
...
protected render() {
return html`
<input @keydown="${this.save}">
};
}
}
Happy coding!