How do I add and remove classes using event listeners in Lit-HTML?

Question

I would like to add and remove 'over' from my class on an element created using a lit-html template triggered by 'dragEnter' and 'dragLeave':

#app {
  background-color: #72a2bc;
  border: 8px dashed transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

#app.over {
  background-color: #a2cee0;
  border-color: #72a2bc;
}

const filesTemplate = () =>
html`
  <button id="app"     
    @dragover=${??}
    @dragleave=${??}     
  >
    Click Me
  </button>
`;

In my old system I called these methods in a separate module via an event emitter, but I am hoping I can make it all defined in the template using lit-html.

 dragEnter(e) {
    this.view.element.className += ' over';
  }

  dragLeave(e) {
    this.view.element.className = element.className.replace(' over', '');
  }

Answer 1

It depends what your custom element looks like. With your template you could just put @dragover=${this.dragEnter}. However, if you want this to apply to your entire custom element and not just the button you can do something like this:

connectedCallback() {
super.connectedCallback();

this.addEventListener('dragover', this.dragEnter);

}

If you do not have custom element and just use lit-html by itself you have to put your event handlers dragEnter(e)and dragLeave(e) into the template like so: @dragover=${this.dragEnter}

You need to add the class with classList.add in dragEnter and remove it in dragLeave. In the future you maybe can use classMap directive in lit-html, however there is nothing wrong with just using classList. I would stick with just using classList. In a very distant future css might also have a selector for it: Is there a CSS ":drop-hover" pseudo-class?

Answer 2

I think that, in order to solve the problem in a "lit-html style", the solution has to be something like this:

import { html, render} from 'lit-html';
import { classMap } from 'lit-html/directives/class-map.js';

const myBtnClasses = {
  over: false
};
function dragEnter(e) {
  myBtnClasses.over = true;
  renderFiles();
}
function dragLeave(e) {
  myBtnClasses.over = false;
  renderFiles();
}

const filesTemplate = (classes) =>
html`
  <button id="app" class="${classMap(myBtnClasses)}"
    @dragover=${dragEnter} @dragleave=${dragLeave}     
  >
    Click Me
  </button>
`;
function renderFiles() {
  render(filesTemplate(myBtnClasses), YOUR_CONTAINER);
}

When using lit-html you have to express your UI as a function of your "state" and "rerender" each time your state changes, so the best solution in this little example is to consider your classes as part of your state.

Answer 3

Anyway better than

this.view.element.className += ' over';

is

this.view.element.classList.add('over');

And instead

this.view.element.className = element.className.replace(' over', '');

use

this.view.element.classList.remove('over');

This is better because of allowing to avoid many bugs like adding the same class many times.

I do not know lit-html but try

let sayHello = (name, myClass) => html`<h1 class="${myClass}">Hello ${name}</h1>`;

https://lit-html.polymer-project.org/