bug: can't access this in form-associated callbacks

[alicewriteswrongs]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.8.0

Current Behavior

In #4939 we added support for form-associated custom element lifecycle callbacks like formAssociatedCallback, however the way they're currently being called doesn't resolve the correct this value to ensure that properties on a Stencil component (e.g. ones decorated with @State) can be resolved properly.

So a little component like this one won't work correctly 😢:

import { Component, h, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
  formAssociated: true,
})
export class MyComponent {
  @State() showWords: boolean = false;

  formAssociatedCallback(form: any) {
    console.log('formAssociated called');
    console.log(this.showWords);
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

Expected Behavior

If I try to access this in a method as in the example it should work correctly.

System Info

No response

Steps to Reproduce

In any of the form-associated callbacks (e.g. formAssociatedCallback) try to access something on this, like a @State property. You should get an error that it's not found (cannot read property 'so and so' of undefined). See the attached repro case.

Code Reproduction URL

https://github.com/alicewriteswrongs/stencil-fa-cb-repro

Additional Information

No response

[tanner-reits]

The fix for this was included as a part of today's v4.8.1 release!