fix: event handler binding in fast-html (#7124)

<!---
Thanks for filing a pull request 😄 ! Before you submit, please read the following:

Search open/closed issues before submitting. Someone may have pushed the same thing before!

Provide a summary of your changes in the title field above.
-->

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->

### 🎫 Issues

Currently, if the event handler is defined as a method (`method() {...} `)instead of a property (`method = () => {...}`), the event handler will not be bound to the correct `this` context, hence `this` inside the event handler would be `undefined`.

## 📑 Test Plan

Test added.

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

Author: marchbox

change/@microsoft-fast-html-9fa2cc7f-15be-4946-b0e5-586e7b3583ea.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: event handler binding",
+  "packageName": "@microsoft/fast-html",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/web-components/fast-html/src/components/template.ts

@@ -333,7 +333,7 @@ class TemplateElement extends FASTElement {
                         closingParenthesis
                     );
                     const binding = (x: any, c: any) =>
-                        pathResolver(propName, self)(x, c)(
+                        pathResolver(propName, self)(x, c).bind(x)(
                             ...(arg === "e" ? [c.event] : []),
                             ...(arg !== "e" && arg !== ""
                                 ? [pathResolver(arg)(x, c)]

packages/web-components/fast-html/src/fixtures/event/event.fixture.html

@@ -17,6 +17,7 @@
                 <button @click="{handleNoArgsClick()}">No arguments</button>
                 <button @click="{handleEventArgClick(e)}">event argument</button>
                 <button @click="{handleAttributeArgClick(foo)}">attribute argument</button>
+                <button @click="{handleModifyAttributeClick()}">modify foo</button>
             </template>
         </f-template>
         <script type="module" src="/event/main.js"></script>

packages/web-components/fast-html/src/fixtures/event/event.spec.ts

@@ -37,4 +37,15 @@ test.describe("f-template", async () => {
 
         expect(message).toEqual("bar");
     });
+    test("should properly bind events with `this`", async ({ page }) => {
+        await page.goto("/event");
+
+        const customElement = await page.locator("test-element");
+
+        await expect(customElement).toHaveJSProperty("foo", "bar");
+
+        await customElement.locator("button").nth(3).click();
+
+        await expect(customElement).toHaveJSProperty("foo", "modified-by-click");
+    });
 });

packages/web-components/fast-html/src/fixtures/event/main.ts

@@ -16,6 +16,10 @@ class TestElement extends FASTElement {
     public handleAttributeArgClick = (foo: string): void => {
         console.log(foo);
     };
+
+    public handleModifyAttributeClick() {
+        this.foo = "modified-by-click";
+    }
 }
 TestElement.define({
     name: "test-element",