diff --git a/packages/web-components/src/tree/define-async.ts b/packages/web-components/src/tree/define-async.ts
new file mode 100644
index 00000000000000..8bf7969caffc13
--- /dev/null
+++ b/packages/web-components/src/tree/define-async.ts
@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './tree.definition-async.js';
+import { Tree } from './tree.js';
+
+RenderableFASTElement(Tree).defineAsync(definition);
diff --git a/packages/web-components/src/tree/tree.definition-async.ts b/packages/web-components/src/tree/tree.definition-async.ts
new file mode 100644
index 00000000000000..bc87dbbb5432c3
--- /dev/null
+++ b/packages/web-components/src/tree/tree.definition-async.ts
@@ -0,0 +1,15 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { tagName } from './tree.options.js';
+
+/**
+ * The async definition configuration for the fluent-tree element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition: PartialFASTElementDefinition = {
+ name: tagName,
+ templateOptions: 'defer-and-hydrate',
+};
diff --git a/packages/web-components/src/tree/tree.template.ts b/packages/web-components/src/tree/tree.template.ts
index 05b8e8073e1473..84d034b2146e84 100644
--- a/packages/web-components/src/tree/tree.template.ts
+++ b/packages/web-components/src/tree/tree.template.ts
@@ -3,6 +3,7 @@ import type { Tree } from './tree.js';
export const template = html`
Date: Mon, 25 May 2026 18:13:21 -0700
Subject: [PATCH 42/44] add changefile
---
...eb-components-ff6dd466-4b60-4451-ab21-3929917fa50a.json | 7 +++++++
1 file changed, 7 insertions(+)
create mode 100644 change/@fluentui-web-components-ff6dd466-4b60-4451-ab21-3929917fa50a.json
diff --git a/change/@fluentui-web-components-ff6dd466-4b60-4451-ab21-3929917fa50a.json b/change/@fluentui-web-components-ff6dd466-4b60-4451-ab21-3929917fa50a.json
new file mode 100644
index 00000000000000..9caa1f8472275f
--- /dev/null
+++ b/change/@fluentui-web-components-ff6dd466-4b60-4451-ab21-3929917fa50a.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat(web-components): add SSR support via Declarative Shadow DOM modules",
+ "packageName": "@fluentui/web-components",
+ "email": "863023+radium-v@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
From d9b43de2887d5c631b2c49f19629270a4ffe8d8f Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 26 May 2026 08:38:15 -0700
Subject: [PATCH 43/44] address PR feedback
---
.../src/accordion-item/define-async.ts | 2 +-
.../accordion/accordion.definition-async.ts | 8 +++++++
.../src/dropdown/dropdown.base.ts | 4 +---
.../web-components/src/menu/define-async.ts | 2 +-
.../src/textarea/textarea.spec.ts | 21 ++++++++-----------
.../src/tree-item/tree-item.base.ts | 2 +-
6 files changed, 21 insertions(+), 18 deletions(-)
diff --git a/packages/web-components/src/accordion-item/define-async.ts b/packages/web-components/src/accordion-item/define-async.ts
index a9c63799400114..09d74534a8dd1a 100644
--- a/packages/web-components/src/accordion-item/define-async.ts
+++ b/packages/web-components/src/accordion-item/define-async.ts
@@ -1,5 +1,5 @@
import { RenderableFASTElement } from '@microsoft/fast-html';
-import { AccordionItem } from './accordion-item.js';
import { definition } from './accordion-item.definition-async.js';
+import { AccordionItem } from './accordion-item.js';
RenderableFASTElement(AccordionItem).defineAsync(definition);
diff --git a/packages/web-components/src/accordion/accordion.definition-async.ts b/packages/web-components/src/accordion/accordion.definition-async.ts
index d47e74dae59dfc..80eb838510f606 100644
--- a/packages/web-components/src/accordion/accordion.definition-async.ts
+++ b/packages/web-components/src/accordion/accordion.definition-async.ts
@@ -1,6 +1,14 @@
import { type PartialFASTElementDefinition } from '@microsoft/fast-element';
import { tagName } from './accordion.options.js';
+/**
+ * The async definition configuration for the fluent-accordion element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
export const declarativeDefinition: PartialFASTElementDefinition = {
name: tagName,
templateOptions: 'defer-and-hydrate',
diff --git a/packages/web-components/src/dropdown/dropdown.base.ts b/packages/web-components/src/dropdown/dropdown.base.ts
index 029d83e608fb5f..0521679615e389 100644
--- a/packages/web-components/src/dropdown/dropdown.base.ts
+++ b/packages/web-components/src/dropdown/dropdown.base.ts
@@ -446,9 +446,7 @@ export class BaseDropdown extends FASTElement {
public get enabledOptions(): DropdownOption[] {
return (
this.listbox?.enabledOptions ??
- Array.from(this.querySelectorAll('*')).filter(
- (o): o is DropdownOption => isDropdownOption(o) && !o.disabled,
- )
+ Array.from(this.querySelectorAll('*')).filter((o): o is DropdownOption => isDropdownOption(o) && !o.disabled)
);
}
diff --git a/packages/web-components/src/menu/define-async.ts b/packages/web-components/src/menu/define-async.ts
index 07a9465cea837a..33dcd84c56e45d 100644
--- a/packages/web-components/src/menu/define-async.ts
+++ b/packages/web-components/src/menu/define-async.ts
@@ -1,5 +1,5 @@
import { RenderableFASTElement } from '@microsoft/fast-html';
-import { Menu } from './menu.js';
import { definition } from './menu.definition-async.js';
+import { Menu } from './menu.js';
RenderableFASTElement(Menu).defineAsync(definition);
diff --git a/packages/web-components/src/textarea/textarea.spec.ts b/packages/web-components/src/textarea/textarea.spec.ts
index 1b6dcec013ea37..30e41542c091bb 100644
--- a/packages/web-components/src/textarea/textarea.spec.ts
+++ b/packages/web-components/src/textarea/textarea.spec.ts
@@ -151,18 +151,15 @@ test.describe('TextArea', () => {
}) => {
const { element } = fastPage;
- await page.addInitScript({
- content: `
- const originalSupports = CSS.supports.bind(CSS);
- window.__originalCSSSupports = originalSupports;
- CSS.supports = (property, value) => {
- if (property === 'field-sizing: content' || (property === 'field-sizing' && value === 'content')) {
- console.log('Mocking CSS.supports to return false for', property);
- return false;
- }
- return originalSupports(property, value);
- };
- `,
+ await page.addInitScript(() => {
+ const originalSupports = CSS.supports.bind(CSS);
+ (window as any).__originalCSSSupports = originalSupports;
+ (CSS as any).supports = (property: string, value: string) => {
+ if (property === 'field-sizing: content' || (property === 'field-sizing' && value === 'content')) {
+ return false;
+ }
+ return originalSupports(property, value);
+ };
});
// Ensures the next navigation creates a new context where the patched CSS.supports is in effect.
diff --git a/packages/web-components/src/tree-item/tree-item.base.ts b/packages/web-components/src/tree-item/tree-item.base.ts
index 23ef1dc5626a3e..55562bc8778814 100644
--- a/packages/web-components/src/tree-item/tree-item.base.ts
+++ b/packages/web-components/src/tree-item/tree-item.base.ts
@@ -1,4 +1,4 @@
-import { attr, css, type ElementStyles, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { attr, css, type ElementStyles, FASTElement, observable } from '@microsoft/fast-element';
import { toggleState } from '../utils/element-internals.js';
import { isTreeItem } from './tree-item.options.js';
From c80688c50e42e793d98df40b86474eb75b342543 Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 26 May 2026 11:06:12 -0700
Subject: [PATCH 44/44] add SSR support to Playwright configuration and
streamline e2e test execution
---
packages/web-components/playwright.config.ts | 34 +++++++++++++++++++-
1 file changed, 33 insertions(+), 1 deletion(-)
diff --git a/packages/web-components/playwright.config.ts b/packages/web-components/playwright.config.ts
index 8f98e850aef1e2..0ee6682982ec2f 100644
--- a/packages/web-components/playwright.config.ts
+++ b/packages/web-components/playwright.config.ts
@@ -1,10 +1,42 @@
import defaultConfig from '@microsoft/fast-test-harness/playwright.config.mjs';
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
const CI = process.env.CI === 'true';
+// Duplicate each browser project across CSR and SSR rendering modes so a
+// single `playwright test` run exercises both. Per-test overrides
+// (e.g. `test.use({ ssr: true })`) still take precedence over the
+// project-level value.
+//
+// TODO: Remove this local axis once the equivalent change lands in
+// @microsoft/fast-test-harness/playwright.config.mjs.
+const browsers = [
+ { name: 'chromium', use: devices['Desktop Chrome'] },
+ { name: 'firefox', use: devices['Desktop Firefox'] },
+ {
+ name: 'webkit',
+ use: {
+ ...devices['Desktop Safari'],
+ deviceScaleFactor: 1,
+ },
+ },
+];
+
+const modes = [
+ { suffix: 'csr', ssr: false },
+ { suffix: 'ssr', ssr: true },
+];
+
+const projects = browsers.flatMap(browser =>
+ modes.map(mode => ({
+ name: `${browser.name}-${mode.suffix}`,
+ use: { ...browser.use, ssr: mode.ssr },
+ })),
+);
+
export default defineConfig({
...defaultConfig,
+ projects,
reporter: CI ? 'github' : 'list',
testMatch: 'src/**/*.spec.ts',
});