In this step, you'll use lit-html's @event
annotation to add an event listener to an element inside your template.
Starting code
my-element.js
{% include projects/try/events/before/my-element.js %}
{% include project.html folder="try/events/before" openFile="my-element.js" %}
-
Add an event listener.
In my-element.js, in your template, replace the existing HTML
button
element with the following code:html <button @click="${this.clickHandler}">Click</button>
The annotation above adds a listener for the
click
event. -
Implement an event handler.
To handle the
click
event, define the following method on yourMyElement
class:js clickHandler(event) { console.log(event.target); this.myBool = !this.myBool; }
If you're stuck, click Launch Code Editor below to see the completed code for Step 5.
{% include project.html folder="try/events/after" openFile="my-element.js" %}