From deac24546b04fa6abe451d3604ea8800be9f1ec1 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:14:06 -0700
Subject: [PATCH 1/4] test: add errors fixture for f-template error cases

Add a test fixture that covers the two error conditions thrown by the
f-template element: no template element present and multiple template
elements present.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/fast-html/src/components/template.ts |  8 ++-
 packages/fast-html/src/debug.ts               |  1 +
 packages/fast-html/src/interfaces.ts          |  1 +
 .../test/fixtures/errors/errors.spec.ts       | 49 +++++++++++++++++++
 .../fast-html/test/fixtures/errors/index.html | 19 +++++++
 .../fast-html/test/fixtures/errors/main.ts    | 14 ++++++
 6 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 packages/fast-html/test/fixtures/errors/errors.spec.ts
 create mode 100644 packages/fast-html/test/fixtures/errors/index.html
 create mode 100644 packages/fast-html/test/fixtures/errors/main.ts

diff --git a/packages/fast-html/src/components/template.ts b/packages/fast-html/src/components/template.ts
index b7c59e808f2..08baa7d2cd3 100644
--- a/packages/fast-html/src/components/template.ts
+++ b/packages/fast-html/src/components/template.ts
@@ -239,9 +239,9 @@ class TemplateElement extends FASTElement {
                 );
             }
 
-            const template = this.getElementsByTagName("template").item(0);
+            const templates = this.getElementsByTagName("template");
 
-            if (template) {
+            if (templates.length === 1) {
                 // Callback: Before template has been evaluated and assigned
                 TemplateElement.lifecycleCallbacks.templateWillUpdate?.(name);
 
@@ -281,6 +281,10 @@ class TemplateElement extends FASTElement {
                         values,
                     );
                 }
+            } else if (templates.length > 1) {
+                throw FAST.error(Message.moreThanOneTemplateProvided, {
+                    name: this.name,
+                });
             } else {
                 throw FAST.error(Message.noTemplateProvided, { name: this.name });
             }
diff --git a/packages/fast-html/src/debug.ts b/packages/fast-html/src/debug.ts
index 18348fac9a3..d3e769c2fd4 100644
--- a/packages/fast-html/src/debug.ts
+++ b/packages/fast-html/src/debug.ts
@@ -1,3 +1,4 @@
 export const debugMessages = {
     [2000 /* noTemplateProvided */]: `The first child of the <f-template> must be a <template>, this is missing from ${name}.`,
+    [2001 /* moreThanOneTemplateProvided */]: `There can only be one <template> inside the <f-template>, you must add one for ${name}.`,
 };
diff --git a/packages/fast-html/src/interfaces.ts b/packages/fast-html/src/interfaces.ts
index cf0a096fd75..7780ea9f068 100644
--- a/packages/fast-html/src/interfaces.ts
+++ b/packages/fast-html/src/interfaces.ts
@@ -4,4 +4,5 @@
  */
 export const enum Message {
     noTemplateProvided = 2000,
+    moreThanOneTemplateProvided = 2001,
 }
diff --git a/packages/fast-html/test/fixtures/errors/errors.spec.ts b/packages/fast-html/test/fixtures/errors/errors.spec.ts
new file mode 100644
index 00000000000..b352f4c87ab
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/errors.spec.ts
@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("f-template errors", () => {
+    test("throws an error when no template element is present", async ({ page }) => {
+        await page.addInitScript(() => {
+            (window as any).__errors = [];
+            window.addEventListener("unhandledrejection", event => {
+                (window as any).__errors.push(
+                    event.reason?.message ?? String(event.reason),
+                );
+            });
+        });
+
+        await page.goto("/fixtures/errors/");
+
+        await expect
+            .poll(async () => {
+                const errors: string[] = await page.evaluate(
+                    () => (window as any).__errors,
+                );
+                return errors.some(msg => msg.includes("must be a <template>"));
+            })
+            .toBe(true);
+    });
+
+    test("throws an error when multiple template elements are present", async ({
+        page,
+    }) => {
+        await page.addInitScript(() => {
+            (window as any).__errors = [];
+            window.addEventListener("unhandledrejection", event => {
+                (window as any).__errors.push(
+                    event.reason?.message ?? String(event.reason),
+                );
+            });
+        });
+
+        await page.goto("/fixtures/errors/");
+
+        await expect
+            .poll(async () => {
+                const errors: string[] = await page.evaluate(
+                    () => (window as any).__errors,
+                );
+                return errors.some(msg => msg.includes("only be one <template>"));
+            })
+            .toBe(true);
+    });
+});
diff --git a/packages/fast-html/test/fixtures/errors/index.html b/packages/fast-html/test/fixtures/errors/index.html
new file mode 100644
index 00000000000..008ed9e8f8c
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Errors</title>
+    </head>
+    <body>
+        <test-element-no-template></test-element-no-template>
+        <test-element-multiple-templates></test-element-multiple-templates>
+        <f-template name="test-element-no-template">
+            <span>No template element provided</span>
+        </f-template>
+        <f-template name="test-element-multiple-templates">
+            <template><span>First template</span></template>
+            <template><span>Second template</span></template>
+        </f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/errors/main.ts b/packages/fast-html/test/fixtures/errors/main.ts
new file mode 100644
index 00000000000..42c89d13649
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/main.ts
@@ -0,0 +1,14 @@
+import { FASTElement } from "@microsoft/fast-element";
+import { TemplateElement } from "@microsoft/fast-html";
+
+class TestElementNoTemplate extends FASTElement {}
+FASTElement.define(TestElementNoTemplate, { name: "test-element-no-template" });
+
+class TestElementMultipleTemplates extends FASTElement {}
+FASTElement.define(TestElementMultipleTemplates, {
+    name: "test-element-multiple-templates",
+});
+
+TemplateElement.define({
+    name: "f-template",
+});

From 54f9eaef8e0be94fe51e1aff81cbd333a1dff8d8 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:44:27 -0700
Subject: [PATCH 2/4] Change files

---
 ...oft-fast-html-a4161f8e-9273-42b3-9c6f-95249dd0ff2e.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@microsoft-fast-html-a4161f8e-9273-42b3-9c6f-95249dd0ff2e.json

diff --git a/change/@microsoft-fast-html-a4161f8e-9273-42b3-9c6f-95249dd0ff2e.json b/change/@microsoft-fast-html-a4161f8e-9273-42b3-9c6f-95249dd0ff2e.json
new file mode 100644
index 00000000000..7fcb6d7e28b
--- /dev/null
+++ b/change/@microsoft-fast-html-a4161f8e-9273-42b3-9c6f-95249dd0ff2e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(fast-html): add errors fixture for f-template error cases",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From 7ccfdfcf5a3b0c434d7417baec56ae99e16eaa37 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 14 Apr 2026 12:24:01 -0700
Subject: [PATCH 3/4] Update packages/fast-html/src/debug.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/fast-html/src/debug.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fast-html/src/debug.ts b/packages/fast-html/src/debug.ts
index d3e769c2fd4..98b9b7c24f7 100644
--- a/packages/fast-html/src/debug.ts
+++ b/packages/fast-html/src/debug.ts
@@ -1,4 +1,4 @@
 export const debugMessages = {
-    [2000 /* noTemplateProvided */]: `The first child of the <f-template> must be a <template>, this is missing from ${name}.`,
-    [2001 /* moreThanOneTemplateProvided */]: `There can only be one <template> inside the <f-template>, you must add one for ${name}.`,
+    [2000 /* noTemplateProvided */]: "The first child of the <f-template> must be a <template>, this is missing from ${name}.",
+    [2001 /* moreThanOneTemplateProvided */]: "There can only be one <template> inside the <f-template>, you must add one for ${name}.",
 };

From 3e4740ed1be157815146ceafbf6edc1cde80eedd Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Tue, 14 Apr 2026 13:31:57 -0700
Subject: [PATCH 4/4] fix(fast-html): use build:fixtures for errors fixture

Replace manually written index.html with entry.html, templates.html,
and state.json source files. Add errors to the build-fixtures script
so index.html is generated like all other fixtures. Refactor spec to
use beforeEach for shared error listener setup.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/fast-html/src/debug.ts               |  6 ++++--
 .../fast-html/test/fixtures/errors/entry.html | 12 +++++++++++
 .../test/fixtures/errors/errors.spec.ts       | 14 ++++---------
 .../fast-html/test/fixtures/errors/index.html | 21 ++++++++++---------
 .../fast-html/test/fixtures/errors/state.json |  1 +
 .../test/fixtures/errors/templates.html       |  7 +++++++
 6 files changed, 39 insertions(+), 22 deletions(-)
 create mode 100644 packages/fast-html/test/fixtures/errors/entry.html
 create mode 100644 packages/fast-html/test/fixtures/errors/state.json
 create mode 100644 packages/fast-html/test/fixtures/errors/templates.html

diff --git a/packages/fast-html/src/debug.ts b/packages/fast-html/src/debug.ts
index 98b9b7c24f7..87140bcaae2 100644
--- a/packages/fast-html/src/debug.ts
+++ b/packages/fast-html/src/debug.ts
@@ -1,4 +1,6 @@
 export const debugMessages = {
-    [2000 /* noTemplateProvided */]: "The first child of the <f-template> must be a <template>, this is missing from ${name}.",
-    [2001 /* moreThanOneTemplateProvided */]: "There can only be one <template> inside the <f-template>, you must add one for ${name}.",
+    [2000 /* noTemplateProvided */]:
+        "The first child of the <f-template> must be a <template>, this is missing from ${name}.",
+    [2001 /* moreThanOneTemplateProvided */]:
+        "There can only be one <template> inside the <f-template>; remove any extra <template> elements and keep exactly one for ${name}.",
 };
diff --git a/packages/fast-html/test/fixtures/errors/entry.html b/packages/fast-html/test/fixtures/errors/entry.html
new file mode 100644
index 00000000000..af2375f44c7
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/entry.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-element-no-template></test-element-no-template>
+        <test-element-multiple-templates></test-element-multiple-templates>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-html/test/fixtures/errors/errors.spec.ts b/packages/fast-html/test/fixtures/errors/errors.spec.ts
index b352f4c87ab..b33929ba23a 100644
--- a/packages/fast-html/test/fixtures/errors/errors.spec.ts
+++ b/packages/fast-html/test/fixtures/errors/errors.spec.ts
@@ -1,16 +1,19 @@
 import { expect, test } from "@playwright/test";
 
 test.describe("f-template errors", () => {
-    test("throws an error when no template element is present", async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
         await page.addInitScript(() => {
             (window as any).__errors = [];
             window.addEventListener("unhandledrejection", event => {
+                event.preventDefault();
                 (window as any).__errors.push(
                     event.reason?.message ?? String(event.reason),
                 );
             });
         });
+    });
 
+    test("throws an error when no template element is present", async ({ page }) => {
         await page.goto("/fixtures/errors/");
 
         await expect
@@ -26,15 +29,6 @@ test.describe("f-template errors", () => {
     test("throws an error when multiple template elements are present", async ({
         page,
     }) => {
-        await page.addInitScript(() => {
-            (window as any).__errors = [];
-            window.addEventListener("unhandledrejection", event => {
-                (window as any).__errors.push(
-                    event.reason?.message ?? String(event.reason),
-                );
-            });
-        });
-
         await page.goto("/fixtures/errors/");
 
         await expect
diff --git a/packages/fast-html/test/fixtures/errors/index.html b/packages/fast-html/test/fixtures/errors/index.html
index 008ed9e8f8c..c5f0e533bfc 100644
--- a/packages/fast-html/test/fixtures/errors/index.html
+++ b/packages/fast-html/test/fixtures/errors/index.html
@@ -2,18 +2,19 @@
 <html lang="en-US">
     <head>
         <meta charset="utf-8">
-        <title>Errors</title>
+        <title></title>
     </head>
     <body>
-        <test-element-no-template></test-element-no-template>
-        <test-element-multiple-templates></test-element-multiple-templates>
-        <f-template name="test-element-no-template">
-            <span>No template element provided</span>
-        </f-template>
-        <f-template name="test-element-multiple-templates">
-            <template><span>First template</span></template>
-            <template><span>Second template</span></template>
-        </f-template>
+        <test-element-no-template><template shadowrootmode="open" shadowroot="open"><span>No template element provided</span></template></test-element-no-template>
+        <test-element-multiple-templates><template shadowrootmode="open" shadowroot="open"><span>First template</span></template></test-element-multiple-templates>
+<f-template name="test-element-no-template">
+    <span>No template element provided</span>
+</f-template>
+<f-template name="test-element-multiple-templates">
+    <template><span>First template</span></template>
+    <template><span>Second template</span></template>
+</f-template>
+
         <script type="module" src="./main.ts"></script>
     </body>
 </html>
diff --git a/packages/fast-html/test/fixtures/errors/state.json b/packages/fast-html/test/fixtures/errors/state.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/state.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/fast-html/test/fixtures/errors/templates.html b/packages/fast-html/test/fixtures/errors/templates.html
new file mode 100644
index 00000000000..e64819d733c
--- /dev/null
+++ b/packages/fast-html/test/fixtures/errors/templates.html
@@ -0,0 +1,7 @@
+<f-template name="test-element-no-template">
+    <span>No template element provided</span>
+</f-template>
+<f-template name="test-element-multiple-templates">
+    <template><span>First template</span></template>
+    <template><span>Second template</span></template>
+</f-template>