Is it possible to pass a function from html into a lit-element?

Question

I have seen examples of passing a function from a parent lit-element to a child one like here - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4

But I want the users of my element, not to be forced to create a wrapper element to use my element.

For example, my element is a dialog that computes some value.

I was hoping I could do something like this (html using my element):

<script>
 function latLongResult(lat,long)
    {
        console.log("resulting lat long called");
    }

</script>
    <lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>

And then in my element:

export class LatLongChooser extends LitElement {


static get properties() {
    return {
      latDecimalDegrees: Number,
      longDecimalDegrees: Number,
      resultingLatLong: {
        type: Function,
      }
    };
  }

saveConvertedValues() {
       console.log("save other values called");
       this.resultingLatLong(this.latDecimalDegrees,this.longDecimalDegrees)
      }

When I try this, I get JavaScript errors.

Answer 1

Your element's code is fine, the way you're trying to set the function is what's a bit off.

You see, the syntax you're using would work if you were in a lit-html/lit-element render function (just with a few corrections, it would be .resultingLatLong=${latLongResult})

However, since you're in a script at the main level you should do something like this:

<script>
 function latLongResult(lat,long){
    console.log("resulting lat long called");
 }
 // do it like this so that it's set as a property, setting it as an attribute would require some rather complicated extra code
 document.querySelector('#latLongDialog').resultingLatLong = latLongResult;

</script>
<lat-long-chooser id="latLongDialog"></lat-long-chooser>

Here's a glitch with a minimal example of something similar in action

Answer 2

You can also configure a observed attributes, in your property resultingLatLong in your lat-long-chooser and set the attribute: false like that:

static get properties() {
    return {
      latDecimalDegrees: Number,
      longDecimalDegrees: Number,
      resultingLatLong: {
        type: Function,
        attribute: false
      }
    };
  }

This will prevent an observed attribute from being created for a property.