Triggering methods of LitElement instances with events results in: Cannot read property 'has' of undefined

[Deleted user]

Description

I am using typescript and created a decorator for handling events with the method decorated. Whenever the events get triggered and i want to set properties in that method i will get an error.
The Error message is:
TypeError: Cannot read property 'has' of undefined
at HTMLElement.requestUpdateInternal (updating-element.ts?6e6a:669)
at HTMLElement.set [as name] (updating-element.ts?6e6a:372)

As my application is depending on that event handler a lot, i need to find a solution which does include that decorator.

Live Demo

https://stackblitz.com/edit/lit-element-properties-has-undefined?file=my-element.ts

Steps to Reproduce

• inititalize my-element
• trigger event that gets handled by my-element
• error will appear

Expected Results

element properties should get updated by the values i set inside the method

Actual Results

the error appears

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: v2.4.0
• webcomponents: v2.4.3

[sorvell]

The issue here is that the function pulled from the decorator descriptor is not called in the context of the element instance. When that function is called, this is Window and it doesn't have the requested property.

To do something like this, it's probably simplest to install some metadata on the element prototype and have a base class actually add the event listener in the element constructor, giving you the change to bind the event listener function to the element instance itself. Hope that helps.