Value of "this"

[jchome]

Hi there,

I'm questionning on the value of "this" in this simple example:

import { html, render, LitElement } from 'lit-element';

class FooButton extends LitElement {
  createRenderRoot() {
    return this;
  }

  firstUpdated(changedProperties) {
    const smallHTML = html`<button @click="${this.clicked}">my button - firstUpdated</button>`;
    return render(smallHTML, document.getElementById('before'));
  }

  render() {
    return html`<button @click="${this.clicked}">my button</button>`;
  }

  clicked() {
    console.log(this);
  }
}

customElements.define('foo-button', FooButton);

index.html is:

Both buttons shows in the console : an instance of FooButton, and HTMLButtonElement item.

Running example here:
https://stackblitz.com/edit/lit-element-click-event-dlsz14?file=index.js

Can you tell me how to use "this" correctly in the "firstUpdated" method?
Thanks.

[augustjk]

What's the goal you're trying to achieve? How to use it correctly depends on what you're trying to do.

There's a bit of "magic" involved when passing a function to the @event binding because the context of this is bound to the element it's on unless specified otherwise as a host option https://lit.dev/docs/libraries/standalone-templates/#render-options

You can bind the context of this in the event handler by using arrow functions instead too.

[justinfagnani]

edit: oops I was looking at the old docs 😬

Yeah, you can pass {eventContext: this} to the render call to set the this value correctly on the event handlers.

[jchome]

Thanks @augustjk,
With the parameter "{host: this}" as 3rd parameter of the render function, the "this" variable is the current instance. The code become :

  firstUpdated(changedProperties) {
    const smallHTML = html`<button @click="${this.clicked}">my button - firstUpdated</button>`;
    return render(smallHTML, document.getElementById('before'), {host: this});
  }

Now, the "clicked" method has the same behavior.