From 33afc62b99e331f1e76a2f64498023ea601384d4 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <hello@mohamedmansour.com>
Date: Tue, 14 Apr 2026 10:47:05 -0700
Subject: [PATCH] test(framework): add composed-root-event regression fixture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tests that custom events with composed:true from deeply nested shadow DOM
components (grandchild → parent → grandparent) correctly reach the
grandparent's @event root handler on <template shadowrootmode>.

The fixture has 3 components: test-grandparent (listens via root event),
test-parent (passthrough), test-child (emits composed event on click).
All 4 tests pass — the framework's \ correctly handles composed
events that pierce shadow boundaries.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../composed-root-event.spec.ts               | 46 +++++++++++++++++++
 .../fixtures/composed-root-event/element.ts   | 28 +++++++++++
 .../composed-root-event/src/index.html        | 10 ++++
 .../src/test-child/test-child.html            |  1 +
 .../test-grandparent/test-grandparent.html    |  4 ++
 .../src/test-parent/test-parent.html          |  4 ++
 .../fixtures/composed-root-event/state.json   |  3 ++
 7 files changed, 96 insertions(+)
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/composed-root-event.spec.ts
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/element.ts
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/src/index.html
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/src/test-child/test-child.html
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/src/test-grandparent/test-grandparent.html
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
 create mode 100644 packages/webui-framework/tests/fixtures/composed-root-event/state.json

diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/composed-root-event.spec.ts b/packages/webui-framework/tests/fixtures/composed-root-event/composed-root-event.spec.ts
new file mode 100644
index 00000000..2084febb
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/composed-root-event.spec.ts
@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { expect, test } from '@playwright/test';
+
+test.describe('composed root event — custom event pierces shadow DOM', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/composed-root-event/fixture.html');
+    await page.waitForSelector('test-grandparent');
+    await page.waitForFunction(() => {
+      const el = document.querySelector('test-grandparent');
+      return el && (el as any).$ready === true;
+    });
+  });
+
+  test('grandparent receives composed custom event from grandchild', async ({ page }) => {
+    // Click the "alpha" button inside test-child (nested 2 shadow DOMs deep)
+    await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();
+
+    // The grandparent's @item-selected root handler should fire
+    await expect(page.locator('test-grandparent .result')).toHaveText('alpha');
+  });
+
+  test('grandparent receives event from second grandchild', async ({ page }) => {
+    await page.locator('test-grandparent test-child[item-id="beta"] .select-btn').click();
+    await expect(page.locator('test-grandparent .result')).toHaveText('beta');
+  });
+
+  test('multiple clicks update correctly', async ({ page }) => {
+    await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();
+    await expect(page.locator('test-grandparent .result')).toHaveText('alpha');
+
+    await page.locator('test-grandparent test-child[item-id="beta"] .select-btn').click();
+    await expect(page.locator('test-grandparent .result')).toHaveText('beta');
+  });
+
+  test('event detail contains correct id', async ({ page }) => {
+    await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();
+
+    const detail = await page.evaluate(() => {
+      const el = document.querySelector('test-grandparent') as any;
+      return el?.selectedItem;
+    });
+    expect(detail).toBe('alpha');
+  });
+});
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/element.ts b/packages/webui-framework/tests/fixtures/composed-root-event/element.ts
new file mode 100644
index 00000000..0d545287
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/element.ts
@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { WebUIElement, observable, attr } from '../../../src/index.js';
+
+// Grandchild — emits a composed custom event.
+export class TestChild extends WebUIElement {
+  @attr itemId = '';
+
+  onSelect(): void {
+    this.$emit('item-selected', { id: this.itemId });
+  }
+}
+TestChild.define('test-child');
+
+// Intermediary — just wraps children, no event handling.
+export class TestParent extends WebUIElement {}
+TestParent.define('test-parent');
+
+// Grandparent — listens for composed event via @item-selected on <template>.
+export class TestGrandparent extends WebUIElement {
+  @observable selectedItem = 'none';
+
+  onItemSelected(e: CustomEvent<{ id: string }>): void {
+    this.selectedItem = e.detail.id;
+  }
+}
+TestGrandparent.define('test-grandparent');
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/src/index.html b/packages/webui-framework/tests/fixtures/composed-root-event/src/index.html
new file mode 100644
index 00000000..fd3bc399
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Composed Root Event Fixture</title>
+</head>
+<body>
+  <test-grandparent></test-grandparent>
+</body>
+</html>
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/src/test-child/test-child.html b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-child/test-child.html
new file mode 100644
index 00000000..ba87e00d
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-child/test-child.html
@@ -0,0 +1 @@
+<button class="select-btn" @click="{onSelect()}">{{itemId}}</button>
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/src/test-grandparent/test-grandparent.html b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-grandparent/test-grandparent.html
new file mode 100644
index 00000000..ef4cc2c2
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-grandparent/test-grandparent.html
@@ -0,0 +1,4 @@
+<template shadowrootmode="open" @item-selected="{onItemSelected(e)}">
+  <span class="result">{{selectedItem}}</span>
+  <test-parent></test-parent>
+</template>
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
new file mode 100644
index 00000000..e4bcff59
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
@@ -0,0 +1,4 @@
+<div class="list">
+  <test-child item-id="alpha"></test-child>
+  <test-child item-id="beta"></test-child>
+</div>
diff --git a/packages/webui-framework/tests/fixtures/composed-root-event/state.json b/packages/webui-framework/tests/fixtures/composed-root-event/state.json
new file mode 100644
index 00000000..45412d09
--- /dev/null
+++ b/packages/webui-framework/tests/fixtures/composed-root-event/state.json
@@ -0,0 +1,3 @@
+{
+  "selectedItem": "none"
+}