fix(runtime): call form-associated lifecycle callbacks w/ this (#5104)

This fixes an issue where form-associated lifecycle callbacks were not
being called with the correct `this` value, making it impossible to set
something like a `@State` value from within a callback.

fixes #5106

src/runtime/proxy-component.ts

@@ -36,10 +36,13 @@ export const proxyComponent = (
           const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
           const instance: d.ComponentInterface = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
           if (!instance) {
-            hostRef.$onReadyPromise$.then((instance: d.ComponentInterface) => instance[cbName]?.(...args));
+            hostRef.$onReadyPromise$.then((instance: d.ComponentInterface) => {
+              const cb = instance[cbName];
+              typeof cb === 'function' && cb.call(instance, ...args);
+            });
           } else {
             const cb = instance[cbName];
-            typeof cb === 'function' && cb(...args);
+            typeof cb === 'function' && cb.call(instance, ...args);
           }
         },
       }),

test/karma/test-app/form-associated/cmp.tsx

@@ -14,6 +14,9 @@ export class FormAssociatedCmp {
 
   formAssociatedCallback(form: HTMLFormAssociatedElement) {
     form.ariaLabel = 'formAssociated called';
+    // this is a regression test for #5106 which ensures that `this` is
+    // resolved correctly
+    this.internals.setValidity({});
   }
 
   render() {