From f0b8ba0419622d94f0f8b0487adb064140e21fcd Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:27:18 -0700
Subject: [PATCH 1/5] feat: add empty array repeat fixture and parent-to-child
 attribute passing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add test-element-empty-array fixture to test repeat directive with empty arrays
  including add/clear cycle (0 → 3 → 0)
- Update nested-elements fixture to pass category attribute from parent to child
- Add @attr decorator to item_parent in repeat fixture classes
- Add @attr decorator to category in both ItemList and Item classes
- Add test verifying runtime parent→child attribute propagation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../test/fixtures/nested-elements/entry.html  |  6 ++--
 .../test/fixtures/nested-elements/index.html  | 20 +++++++----
 .../test/fixtures/nested-elements/main.ts     | 18 ++++++----
 .../nested-elements/nested-elements.spec.ts   | 36 ++++++++++++++++---
 .../test/fixtures/nested-elements/state.json  |  3 +-
 .../fixtures/nested-elements/templates.html   |  2 ++
 .../fast-html/test/fixtures/repeat/entry.html |  1 +
 .../fast-html/test/fixtures/repeat/index.html | 12 +++++++
 .../fast-html/test/fixtures/repeat/main.ts    | 13 ++++++-
 .../test/fixtures/repeat/repeat.spec.ts       | 25 +++++++++++++
 .../test/fixtures/repeat/templates.html       |  9 +++++
 11 files changed, 122 insertions(+), 23 deletions(-)
diff --git a/packages/fast-html/test/fixtures/nested-elements/entry.html b/packages/fast-html/test/fixtures/nested-elements/entry.html
index 6061c49528b..f81eb70479d 100644
--- a/packages/fast-html/test/fixtures/nested-elements/entry.html
+++ b/packages/fast-html/test/fixtures/nested-elements/entry.html
@@ -6,9 +6,9 @@
         <title>Nested Elements Hydration Tests</title>
     </head>
     <body>
-        <parent-element></parent-element>
-        <parent-element title="Empty List" :items="{{emptyItems}}"></parent-element>
-        <parent-element title="Single Item" :items="{{singleItem}}"></parent-element>
+        <parent-element category="{{category}}"></parent-element>
+        <parent-element title="Empty List" :items="{{emptyItems}}" category="{{category}}"></parent-element>
+        <parent-element title="Single Item" :items="{{singleItem}}" category="{{category}}"></parent-element>
         <script type="module" src="./main.ts"></script>
     </body>
 </html>
diff --git a/packages/fast-html/test/fixtures/nested-elements/index.html b/packages/fast-html/test/fixtures/nested-elements/index.html
index f09e2456baf..48faa4f553d 100644
--- a/packages/fast-html/test/fixtures/nested-elements/index.html
+++ b/packages/fast-html/test/fixtures/nested-elements/index.html
@@ -6,40 +6,44 @@
         <title>Nested Elements Hydration Tests</title>
     </head>
     <body>
-        <parent-element><template shadowrootmode="open" shadowroot="open"><div class="list-container">
+        <parent-element category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->My Items<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
             <div class="items">
                 <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
-                    <child-element text="Item 1" idx="0" data-fe-c-0-2><template shadowrootmode="open" shadowroot="open"><div class="item">
+                    <child-element text="Item 1" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 1<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-repeat$$start$$1$$fe-repeat-->
-                    <child-element text="Item 2" idx="1" data-fe-c-0-2><template shadowrootmode="open" shadowroot="open"><div class="item">
+                    <child-element text="Item 2" idx="1" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->1<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 2<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$1$$fe-repeat--><!--fe-repeat$$start$$2$$fe-repeat-->
-                    <child-element text="Item 3" idx="2" data-fe-c-0-2><template shadowrootmode="open" shadowroot="open"><div class="item">
+                    <child-element text="Item 3" idx="2" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->2<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 3<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$2$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
         </div></template></parent-element>
-        <parent-element title="Empty List"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
+        <parent-element title="Empty List" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Empty List<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
             <div class="items">
                 <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
         </div></template></parent-element>
-        <parent-element title="Single Item"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
+        <parent-element title="Single Item" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
             <div class="items">
                 <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
-                    <child-element text="Only Item" idx="0" data-fe-c-0-2><template shadowrootmode="open" shadowroot="open"><div class="item">
+                    <child-element text="Only Item" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Only Item<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
@@ -49,6 +53,7 @@ <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
+            <span class="category">{{category}}</span>
         </div>
     </template>
 </f-template>
@@ -61,6 +66,7 @@ <h2>{{title}}</h2>
                     <child-element
                         text="{{item.text}}"
                         idx="{{$index}}"
+                        category="{{category}}"
                     ></child-element>
                 </f-repeat>
             </div>
diff --git a/packages/fast-html/test/fixtures/nested-elements/main.ts b/packages/fast-html/test/fixtures/nested-elements/main.ts
index 83c1ae90cff..24c0c3f87cd 100644
--- a/packages/fast-html/test/fixtures/nested-elements/main.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/main.ts
@@ -1,4 +1,4 @@
-import { FASTElement } from "@microsoft/fast-element";
+import { attr, FASTElement } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 import { deepMerge } from "@microsoft/fast-html/utilities.js";
 
@@ -9,19 +9,22 @@ const mockDataSources = {
     getListData(listId: string) {
         const dataSets: Record<
             string,
-            { title: string; items: Array<{ text: string }> }
+            { title: string; items: Array<{ text: string }>; category: string }
         > = {
             "list-1": {
                 title: "My Items",
                 items: [{ text: "Item 1" }, { text: "Item 2" }, { text: "Item 3" }],
+                category: "General",
             },
             "list-2": {
                 title: "Empty List",
                 items: [],
+                category: "General",
             },
             "list-3": {
                 title: "Single Item",
                 items: [{ text: "Only Item" }],
+                category: "General",
             },
         };
         return dataSets[listId] || { title: "Unknown List", items: [] };
@@ -47,6 +50,9 @@ export class ItemList extends RenderableElement {
 
     public title!: string;
 
+    @attr
+    public category!: string;
+
     // Track which list instance this is (1st, 2nd, or 3rd on the page)
     private static prepareCallCount = 0;
     private static instanceMap = new WeakMap<ItemList, number>();
@@ -68,6 +74,7 @@ export class ItemList extends RenderableElement {
         // Set data from fresh source - should match pre-rendered content exactly
         this.title = data.title;
         this.items = data.items;
+        this.category = data.category;
 
         // Simulate slight delay for data loading
         await new Promise(resolve => setTimeout(resolve, 50));
@@ -79,14 +86,13 @@ export class Item extends RenderableElement {
 
     public idx!: number;
 
+    @attr
+    public category!: string;
+
     // Track which item instance this is globally
     private static prepareCallCount = 0;
     private static instanceMap = new WeakMap<Item, number>();
 
-    constructor() {
-        super();
-    }
-
     async prepare() {
         // Assign instance number on first prepare() call for this instance
         if (!Item.instanceMap.has(this)) {
diff --git a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
index 7ced7b363f7..94503b59ee9 100644
--- a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
+import type { ItemList } from "./main.js";
 
 test.describe("Nested Elements Hydration", () => {
     test("should hydrate parent elements before child elements", async ({ page }) => {
@@ -7,10 +8,10 @@ test.describe("Nested Elements Hydration", () => {
         const messages = (await page.evaluate("window.messages")) as string[];
 
         const parentDefinitionIndex = messages.findIndex(message =>
-            message.startsWith("Element did define: parent-element")
+            message.startsWith("Element did define: parent-element"),
         );
         const firstChildHydrationIndex = messages.findIndex(message =>
-            message.startsWith("Element will hydrate: child-element")
+            message.startsWith("Element will hydrate: child-element"),
         );
 
         expect(parentDefinitionIndex).toBeGreaterThan(-1);
@@ -18,10 +19,10 @@ test.describe("Nested Elements Hydration", () => {
         expect(parentDefinitionIndex).toBeLessThan(firstChildHydrationIndex);
 
         const childHydrationStarts = messages.filter(message =>
-            message.startsWith("Element will hydrate: child-element")
+            message.startsWith("Element will hydrate: child-element"),
         );
         const childHydrationCompletes = messages.filter(message =>
-            message.startsWith("Element did hydrate: child-element")
+            message.startsWith("Element did hydrate: child-element"),
         );
 
         // Non-zero proves the fixture actually exercised nested hydration.
@@ -30,4 +31,29 @@ test.describe("Nested Elements Hydration", () => {
         // Equal counts mean every child that started hydration also finished.
         expect(childHydrationStarts.length).toBe(childHydrationCompletes.length);
     });
+
+    test("should pass parent attribute to child elements", async ({ page }) => {
+        await page.goto("/fixtures/nested-elements/");
+
+        const parentElements = page.locator("parent-element");
+        const firstParent = parentElements.nth(0);
+        const childElements = firstParent.locator("child-element");
+
+        const childCount = await childElements.count();
+        expect(childCount).toBeGreaterThan(0);
+
+        for (let i = 0; i < childCount; i++) {
+            const categoryText = childElements.nth(i).locator(".category");
+            await expect(categoryText).toHaveText("General");
+        }
+
+        await firstParent.evaluate((node: ItemList) => {
+            node.category = "Updated";
+        });
+
+        for (let i = 0; i < childCount; i++) {
+            const categoryText = childElements.nth(i).locator(".category");
+            await expect(categoryText).toHaveText("Updated");
+        }
+    });
 });
diff --git a/packages/fast-html/test/fixtures/nested-elements/state.json b/packages/fast-html/test/fixtures/nested-elements/state.json
index 78a821315f2..0420772c96e 100644
--- a/packages/fast-html/test/fixtures/nested-elements/state.json
+++ b/packages/fast-html/test/fixtures/nested-elements/state.json
@@ -2,5 +2,6 @@
     "title": "My Items",
     "items": [{ "text": "Item 1" }, { "text": "Item 2" }, { "text": "Item 3" }],
     "emptyItems": [],
-    "singleItem": [{ "text": "Only Item" }]
+    "singleItem": [{ "text": "Only Item" }],
+    "category": "General"
 }
diff --git a/packages/fast-html/test/fixtures/nested-elements/templates.html b/packages/fast-html/test/fixtures/nested-elements/templates.html
index 212762f7ccc..a0dc3fe12ef 100644
--- a/packages/fast-html/test/fixtures/nested-elements/templates.html
+++ b/packages/fast-html/test/fixtures/nested-elements/templates.html
@@ -3,6 +3,7 @@
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
+            <span class="category">{{category}}</span>
         </div>
     </template>
 </f-template>
@@ -15,6 +16,7 @@ <h2>{{title}}</h2>
                     <child-element
                         text="{{item.text}}"
                         idx="{{$index}}"
+                        category="{{category}}"
                     ></child-element>
                 </f-repeat>
             </div>
diff --git a/packages/fast-html/test/fixtures/repeat/entry.html b/packages/fast-html/test/fixtures/repeat/entry.html
index 9f2ab883462..40134aa49d2 100644
--- a/packages/fast-html/test/fixtures/repeat/entry.html
+++ b/packages/fast-html/test/fixtures/repeat/entry.html
@@ -14,6 +14,7 @@
         <test-element-no-item-repeat-binding
             list="{{emptyList}}"
         ></test-element-no-item-repeat-binding>
+        <test-element-empty-array :list="{{emptyList}}"></test-element-empty-array>
         <test-element-event :list="{{eventList}}"></test-element-event>
         <script type="module" src="./main.ts"></script>
     </body>
diff --git a/packages/fast-html/test/fixtures/repeat/index.html b/packages/fast-html/test/fixtures/repeat/index.html
index 1163fcdee7a..7f3072c5920 100644
--- a/packages/fast-html/test/fixtures/repeat/index.html
+++ b/packages/fast-html/test/fixtures/repeat/index.html
@@ -46,6 +46,9 @@
         <test-element-no-item-repeat-binding><template shadowrootmode="open" shadowroot="open"><ul>
             <!--fe-b$$start$$0$$repeat-0$$fe-b--><!--fe-b$$end$$0$$repeat-0$$fe-b-->
         </ul></template></test-element-no-item-repeat-binding>
+        <test-element-empty-array><template shadowrootmode="open" shadowroot="open"><ul>
+            <!--fe-b$$start$$0$$repeat-0$$fe-b--><!--fe-b$$end$$0$$repeat-0$$fe-b-->
+        </ul></template></test-element-empty-array>
         <test-element-event><template shadowrootmode="open" shadowroot="open"><!--fe-b$$start$$0$$repeat-0$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
             <button data-fe-c-0-1>Click</button>
         <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$0$$repeat-0$$fe-b--></template></test-element-event>
@@ -94,6 +97,15 @@
         </f-repeat>
     </template>
 </f-template>
+<f-template name="test-element-empty-array">
+    <template>
+        <ul>
+            <f-repeat value="{{item in list}}">
+                <li>{{item}}</li>
+            </f-repeat>
+        </ul>
+    </template>
+</f-template>
 <f-template name="test-element-interval-updates">
     <template>
         <ul>
diff --git a/packages/fast-html/test/fixtures/repeat/main.ts b/packages/fast-html/test/fixtures/repeat/main.ts
index f860ce6cfc2..29707d82948 100644
--- a/packages/fast-html/test/fixtures/repeat/main.ts
+++ b/packages/fast-html/test/fixtures/repeat/main.ts
@@ -1,4 +1,4 @@
-import { FASTElement, observable } from "@microsoft/fast-element";
+import { attr, FASTElement, observable } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 import { deepMerge } from "@microsoft/fast-html/utilities.js";
 
@@ -6,6 +6,7 @@ export class TestElement extends FASTElement {
     @observable
     list: Array<string> = ["Foo", "Bar"];
 
+    @attr
     item_parent: string = "Bat";
 }
 RenderableFASTElement(TestElement).defineAsync({
@@ -56,6 +57,15 @@ RenderableFASTElement(TestElementNoItemRepeatBinding).defineAsync({
     templateOptions: "defer-and-hydrate",
 });
 
+export class TestElementEmptyArray extends FASTElement {
+    @observable
+    list: Array<string> = [];
+}
+RenderableFASTElement(TestElementEmptyArray).defineAsync({
+    name: "test-element-empty-array",
+    templateOptions: "defer-and-hydrate",
+});
+
 export class TestElementEvent extends FASTElement {
     @observable
     list: Array<string> = ["A"];
@@ -75,6 +85,7 @@ RenderableFASTElement(TestElementEvent).defineAsync({
 export class TestElementWithObserverMap extends FASTElement {
     list: Array<string> = ["Foo", "Bar"];
 
+    @attr
     item_parent: string = "Bat";
 }
 RenderableFASTElement(TestElementWithObserverMap).defineAsync({
diff --git a/packages/fast-html/test/fixtures/repeat/repeat.spec.ts b/packages/fast-html/test/fixtures/repeat/repeat.spec.ts
index 3579fad7f98..2cd2daef28a 100644
--- a/packages/fast-html/test/fixtures/repeat/repeat.spec.ts
+++ b/packages/fast-html/test/fixtures/repeat/repeat.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import type {
     TestElement,
+    TestElementEmptyArray,
     TestElementEvent,
     TestElementIntervalUpdates,
 } from "./main.js";
@@ -187,4 +188,28 @@ test.describe("f-template", async () => {
         await buttons.nth(1).click();
         await expect(element).toHaveJSProperty("clickCount", 2);
     });
+
+    test("repeat directive with an empty array should render no items", async ({
+        page,
+    }) => {
+        await page.goto("/fixtures/repeat/");
+
+        const element = page.locator("test-element-empty-array");
+        const listItems = element.locator("li");
+
+        await expect(listItems).toHaveCount(0);
+
+        await element.evaluate((node: TestElementEmptyArray) => {
+            node.list = ["A", "B", "C"];
+        });
+
+        await expect(listItems).toHaveCount(3);
+        await expect(listItems).toContainText(["A", "B", "C"]);
+
+        await element.evaluate((node: TestElementEmptyArray) => {
+            node.list = [];
+        });
+
+        await expect(listItems).toHaveCount(0);
+    });
 });
diff --git a/packages/fast-html/test/fixtures/repeat/templates.html b/packages/fast-html/test/fixtures/repeat/templates.html
index b9b35983472..fe6be3a28b5 100644
--- a/packages/fast-html/test/fixtures/repeat/templates.html
+++ b/packages/fast-html/test/fixtures/repeat/templates.html
@@ -43,6 +43,15 @@
         </f-repeat>
     </template>
 </f-template>
+<f-template name="test-element-empty-array">
+    <template>
+        <ul>
+            <f-repeat value="{{item in list}}">
+                <li>{{item}}</li>
+            </f-repeat>
+        </ul>
+    </template>
+</f-template>
 <f-template name="test-element-interval-updates">
     <template>
         <ul>

From e4273ee2014ced164ebe033405815830f15c3cd6 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:29:31 -0700
Subject: [PATCH 2/5] Change files

---
 ...oft-fast-html-53ef8dcc-b1fe-4995-a1b8-0963b196187a.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@microsoft-fast-html-53ef8dcc-b1fe-4995-a1b8-0963b196187a.json

diff --git a/change/@microsoft-fast-html-53ef8dcc-b1fe-4995-a1b8-0963b196187a.json b/change/@microsoft-fast-html-53ef8dcc-b1fe-4995-a1b8-0963b196187a.json
new file mode 100644
index 00000000000..0bc419ad26c
--- /dev/null
+++ b/change/@microsoft-fast-html-53ef8dcc-b1fe-4995-a1b8-0963b196187a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add empty array repeat fixture and parent-to-child attribute passing",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From a8aa22a5dd03d1c48d74b4af61c39aa12ec51ae4 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:40:54 -0700
Subject: [PATCH 3/5] fix: render category in parent template above repeated
 list

Move category display from child-element template to parent-element
template, above the f-repeat. Child elements still receive category as
a passed attribute from the parent context. Test now verifies both the
parent-rendered text and the attribute on each child element.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../test/fixtures/nested-elements/index.html  | 19 +++++++++----------
 .../nested-elements/nested-elements.spec.ts   | 15 +++++++++++----
 .../fixtures/nested-elements/templates.html   |  2 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/fast-html/test/fixtures/nested-elements/index.html b/packages/fast-html/test/fixtures/nested-elements/index.html
index 48faa4f553d..bbedf8bf123 100644
--- a/packages/fast-html/test/fixtures/nested-elements/index.html
+++ b/packages/fast-html/test/fixtures/nested-elements/index.html
@@ -8,44 +8,43 @@
     <body>
         <parent-element category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->My Items<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
+            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
+                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
                     <child-element text="Item 1" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 1<!--fe-b$$end$$1$$text-1$$fe-b--></span>
-            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-repeat$$start$$1$$fe-repeat-->
                     <child-element text="Item 2" idx="1" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->1<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 2<!--fe-b$$end$$1$$text-1$$fe-b--></span>
-            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
                 <!--fe-repeat$$end$$1$$fe-repeat--><!--fe-repeat$$start$$2$$fe-repeat-->
                     <child-element text="Item 3" idx="2" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->2<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 3<!--fe-b$$end$$1$$text-1$$fe-b--></span>
-            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
-                <!--fe-repeat$$end$$2$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
+                <!--fe-repeat$$end$$2$$fe-repeat--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
             </div>
         </div></template></parent-element>
         <parent-element title="Empty List" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Empty List<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
+            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
+                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
             </div>
         </div></template></parent-element>
         <parent-element title="Single Item" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
+            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
+                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
                     <child-element text="Only Item" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Only Item<!--fe-b$$end$$1$$text-1$$fe-b--></span>
-            <span class="category"><!--fe-b$$start$$2$$category-2$$fe-b-->General<!--fe-b$$end$$2$$category-2$$fe-b--></span>
         </div></template></child-element>
-                <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
+                <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
             </div>
         </div></template></parent-element>
 <f-template name="child-element">
@@ -53,7 +52,6 @@ <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
-            <span class="category">{{category}}</span>
         </div>
     </template>
 </f-template>
@@ -61,6 +59,7 @@ <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe
     <template>
         <div class="list-container">
             <h2>{{title}}</h2>
+            <p class="category">{{category}}</p>
             <div class="items">
                 <f-repeat value="{{item in items}}" positioning="true">
                     <child-element
diff --git a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
index 94503b59ee9..6c2d83d48e2 100644
--- a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
@@ -37,23 +37,30 @@ test.describe("Nested Elements Hydration", () => {
 
         const parentElements = page.locator("parent-element");
         const firstParent = parentElements.nth(0);
+        const categoryLabel = firstParent.locator(".category");
         const childElements = firstParent.locator("child-element");
 
+        // Category is rendered in the parent template above the repeated list
+        await expect(categoryLabel).toHaveText("General");
+
         const childCount = await childElements.count();
         expect(childCount).toBeGreaterThan(0);
 
+        // Each child receives the parent's category as an attribute
         for (let i = 0; i < childCount; i++) {
-            const categoryText = childElements.nth(i).locator(".category");
-            await expect(categoryText).toHaveText("General");
+            await expect(childElements.nth(i)).toHaveAttribute("category", "General");
         }
 
         await firstParent.evaluate((node: ItemList) => {
             node.category = "Updated";
         });
 
+        // Parent template updates
+        await expect(categoryLabel).toHaveText("Updated");
+
+        // Child attributes propagate the updated value
         for (let i = 0; i < childCount; i++) {
-            const categoryText = childElements.nth(i).locator(".category");
-            await expect(categoryText).toHaveText("Updated");
+            await expect(childElements.nth(i)).toHaveAttribute("category", "Updated");
         }
     });
 });
diff --git a/packages/fast-html/test/fixtures/nested-elements/templates.html b/packages/fast-html/test/fixtures/nested-elements/templates.html
index a0dc3fe12ef..55f90cc6355 100644
--- a/packages/fast-html/test/fixtures/nested-elements/templates.html
+++ b/packages/fast-html/test/fixtures/nested-elements/templates.html
@@ -3,7 +3,6 @@
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
-            <span class="category">{{category}}</span>
         </div>
     </template>
 </f-template>
@@ -11,6 +10,7 @@
     <template>
         <div class="list-container">
             <h2>{{title}}</h2>
+            <p class="category">{{category}}</p>
             <div class="items">
                 <f-repeat value="{{item in items}}" positioning="true">
                     <child-element

From b39936791ffa745d37c932224639c4784584b4d3 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:48:09 -0700
Subject: [PATCH 4/5] feat: add grand-child-element to render category via
 three-level nesting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add grand-child-element inside child-element's template to render
the category attribute. Category now flows parent → child → grand-child,
testing three levels of attribute forwarding through nested custom
elements. Remove category rendering from parent-element template.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../test/fixtures/nested-elements/index.html  | 26 ++++++++++++-------
 .../test/fixtures/nested-elements/main.ts     | 13 ++++++++++
 .../nested-elements/nested-elements.spec.ts   | 20 +++++++++-----
 .../fixtures/nested-elements/templates.html   |  9 ++++++-
 4 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/fast-html/test/fixtures/nested-elements/index.html b/packages/fast-html/test/fixtures/nested-elements/index.html
index bbedf8bf123..82f3e43b0fa 100644
--- a/packages/fast-html/test/fixtures/nested-elements/index.html
+++ b/packages/fast-html/test/fixtures/nested-elements/index.html
@@ -8,50 +8,59 @@
     <body>
         <parent-element category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->My Items<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
-            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
+                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
                     <child-element text="Item 1" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 1<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <grand-child-element category="General" data-fe-c-2-1><template shadowrootmode="open" shadowroot="open"><span class="category"><!--fe-b$$start$$0$$category-0$$fe-b-->General<!--fe-b$$end$$0$$category-0$$fe-b--></span></template></grand-child-element>
         </div></template></child-element>
                 <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-repeat$$start$$1$$fe-repeat-->
                     <child-element text="Item 2" idx="1" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->1<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 2<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <grand-child-element category="General" data-fe-c-2-1><template shadowrootmode="open" shadowroot="open"><span class="category"><!--fe-b$$start$$0$$category-0$$fe-b-->General<!--fe-b$$end$$0$$category-0$$fe-b--></span></template></grand-child-element>
         </div></template></child-element>
                 <!--fe-repeat$$end$$1$$fe-repeat--><!--fe-repeat$$start$$2$$fe-repeat-->
                     <child-element text="Item 3" idx="2" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->2<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Item 3<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <grand-child-element category="General" data-fe-c-2-1><template shadowrootmode="open" shadowroot="open"><span class="category"><!--fe-b$$start$$0$$category-0$$fe-b-->General<!--fe-b$$end$$0$$category-0$$fe-b--></span></template></grand-child-element>
         </div></template></child-element>
-                <!--fe-repeat$$end$$2$$fe-repeat--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
+                <!--fe-repeat$$end$$2$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
         </div></template></parent-element>
         <parent-element title="Empty List" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Empty List<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
-            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
+                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
         </div></template></parent-element>
         <parent-element title="Single Item" category="General"><template shadowrootmode="open" shadowroot="open"><div class="list-container">
             <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe-b--></h2>
-            <p class="category"><!--fe-b$$start$$1$$category-1$$fe-b-->General<!--fe-b$$end$$1$$category-1$$fe-b--></p>
             <div class="items">
-                <!--fe-b$$start$$2$$repeat-2$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
+                <!--fe-b$$start$$1$$repeat-1$$fe-b--><!--fe-repeat$$start$$0$$fe-repeat-->
                     <child-element text="Only Item" idx="0" category="General" data-fe-c-0-3><template shadowrootmode="open" shadowroot="open"><div class="item">
             <span class="index"><!--fe-b$$start$$0$$idx-0$$fe-b-->0<!--fe-b$$end$$0$$idx-0$$fe-b--></span>
             <span class="text"><!--fe-b$$start$$1$$text-1$$fe-b-->Only Item<!--fe-b$$end$$1$$text-1$$fe-b--></span>
+            <grand-child-element category="General" data-fe-c-2-1><template shadowrootmode="open" shadowroot="open"><span class="category"><!--fe-b$$start$$0$$category-0$$fe-b-->General<!--fe-b$$end$$0$$category-0$$fe-b--></span></template></grand-child-element>
         </div></template></child-element>
-                <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$2$$repeat-2$$fe-b-->
+                <!--fe-repeat$$end$$0$$fe-repeat--><!--fe-b$$end$$1$$repeat-1$$fe-b-->
             </div>
         </div></template></parent-element>
+<f-template name="grand-child-element">
+    <template>
+        <span class="category">{{category}}</span>
+    </template>
+</f-template>
 <f-template name="child-element">
     <template>
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
+            <grand-child-element
+                category="{{category}}"
+            ></grand-child-element>
         </div>
     </template>
 </f-template>
@@ -59,7 +68,6 @@ <h2><!--fe-b$$start$$0$$title-0$$fe-b-->Single Item<!--fe-b$$end$$0$$title-0$$fe
     <template>
         <div class="list-container">
             <h2>{{title}}</h2>
-            <p class="category">{{category}}</p>
             <div class="items">
                 <f-repeat value="{{item in items}}" positioning="true">
                     <child-element
diff --git a/packages/fast-html/test/fixtures/nested-elements/main.ts b/packages/fast-html/test/fixtures/nested-elements/main.ts
index 24c0c3f87cd..82b59b9590c 100644
--- a/packages/fast-html/test/fixtures/nested-elements/main.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/main.ts
@@ -111,6 +111,11 @@ export class Item extends RenderableElement {
     }
 }
 
+export class GrandChildItem extends RenderableElement {
+    @attr
+    public category!: string;
+}
+
 RenderableFASTElement(ItemList).defineAsync({
     name: "parent-element",
     templateOptions: "defer-and-hydrate",
@@ -121,6 +126,11 @@ RenderableFASTElement(Item).defineAsync({
     templateOptions: "defer-and-hydrate",
 });
 
+RenderableFASTElement(GrandChildItem).defineAsync({
+    name: "grand-child-element",
+    templateOptions: "defer-and-hydrate",
+});
+
 (window as any).messages = [];
 
 TemplateElement.options({
@@ -130,6 +140,9 @@ TemplateElement.options({
     "child-element": {
         observerMap: "all",
     },
+    "grand-child-element": {
+        observerMap: "all",
+    },
 })
     .config({
         elementDidDefine(name: string) {
diff --git a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
index 6c2d83d48e2..42e5dcc1095 100644
--- a/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/nested-elements.spec.ts
@@ -37,12 +37,8 @@ test.describe("Nested Elements Hydration", () => {
 
         const parentElements = page.locator("parent-element");
         const firstParent = parentElements.nth(0);
-        const categoryLabel = firstParent.locator(".category");
         const childElements = firstParent.locator("child-element");
 
-        // Category is rendered in the parent template above the repeated list
-        await expect(categoryLabel).toHaveText("General");
-
         const childCount = await childElements.count();
         expect(childCount).toBeGreaterThan(0);
 
@@ -51,16 +47,26 @@ test.describe("Nested Elements Hydration", () => {
             await expect(childElements.nth(i)).toHaveAttribute("category", "General");
         }
 
+        // Grand-child-element renders the category passed from parent → child → grand-child
+        const grandChildren = firstParent.locator("grand-child-element");
+        for (let i = 0; i < childCount; i++) {
+            const categoryText = grandChildren.nth(i).locator(".category");
+            await expect(categoryText).toHaveText("General");
+        }
+
         await firstParent.evaluate((node: ItemList) => {
             node.category = "Updated";
         });
 
-        // Parent template updates
-        await expect(categoryLabel).toHaveText("Updated");
-
         // Child attributes propagate the updated value
         for (let i = 0; i < childCount; i++) {
             await expect(childElements.nth(i)).toHaveAttribute("category", "Updated");
         }
+
+        // Grand-child-element renders the updated category
+        for (let i = 0; i < childCount; i++) {
+            const categoryText = grandChildren.nth(i).locator(".category");
+            await expect(categoryText).toHaveText("Updated");
+        }
     });
 });
diff --git a/packages/fast-html/test/fixtures/nested-elements/templates.html b/packages/fast-html/test/fixtures/nested-elements/templates.html
index 55f90cc6355..807125d990b 100644
--- a/packages/fast-html/test/fixtures/nested-elements/templates.html
+++ b/packages/fast-html/test/fixtures/nested-elements/templates.html
@@ -1,8 +1,16 @@
+<f-template name="grand-child-element">
+    <template>
+        <span class="category">{{category}}</span>
+    </template>
+</f-template>
 <f-template name="child-element">
     <template>
         <div class="item">
             <span class="index">{{idx}}</span>
             <span class="text">{{text}}</span>
+            <grand-child-element
+                category="{{category}}"
+            ></grand-child-element>
         </div>
     </template>
 </f-template>
@@ -10,7 +18,6 @@
     <template>
         <div class="list-container">
             <h2>{{title}}</h2>
-            <p class="category">{{category}}</p>
             <div class="items">
                 <f-repeat value="{{item in items}}" positioning="true">
                     <child-element

From 4c78bf76534ac93bfde1473e8f5925eb6c30f65f Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Mon, 13 Apr 2026 12:52:39 -0700
Subject: [PATCH 5/5] chore: remove category from mock getListData

Category is now sourced solely from the @attr decorator and state
propagation, not from the mock data source.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/fast-html/test/fixtures/nested-elements/main.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/fast-html/test/fixtures/nested-elements/main.ts b/packages/fast-html/test/fixtures/nested-elements/main.ts
index 82b59b9590c..dda1007222c 100644
--- a/packages/fast-html/test/fixtures/nested-elements/main.ts
+++ b/packages/fast-html/test/fixtures/nested-elements/main.ts
@@ -9,22 +9,19 @@ const mockDataSources = {
     getListData(listId: string) {
         const dataSets: Record<
             string,
-            { title: string; items: Array<{ text: string }>; category: string }
+            { title: string; items: Array<{ text: string }> }
         > = {
             "list-1": {
                 title: "My Items",
                 items: [{ text: "Item 1" }, { text: "Item 2" }, { text: "Item 3" }],
-                category: "General",
             },
             "list-2": {
                 title: "Empty List",
                 items: [],
-                category: "General",
             },
             "list-3": {
                 title: "Single Item",
                 items: [{ text: "Only Item" }],
-                category: "General",
             },
         };
         return dataSets[listId] || { title: "Unknown List", items: [] };
@@ -74,7 +71,6 @@ export class ItemList extends RenderableElement {
         // Set data from fresh source - should match pre-rendered content exactly
         this.title = data.title;
         this.items = data.items;
-        this.category = data.category;
 
         // Simulate slight delay for data loading
         await new Promise(resolve => setTimeout(resolve, 50));
