From 094f20749b3d1778ce608fd76b3cd11202c4bb69 Mon Sep 17 00:00:00 2001
From: Jane Chu <7559015+janechu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 10:47:16 -0700
Subject: [PATCH] feat: support async declarative template strings

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...-78e81f3e-f6be-4ebe-be05-ec6b62829ace.json |   7 +
 packages/fast-element/DESIGN.md               |  12 +-
 packages/fast-element/README.md               |  34 +++
 packages/fast-element/SIZES.md                |   2 +-
 .../fast-element/docs/declarative-html.md     |  45 +++-
 .../docs/declarative/api-report.api.md        |  20 ++
 .../fast-element/src/declarative/debug.ts     |   4 +
 .../fast-element/src/declarative/index.ts     |   8 +-
 .../src/declarative/interfaces.ts             |   2 +
 .../declarative/template-bridge.pw.spec.ts    |  64 +++++
 .../fast-element/src/declarative/template.ts  | 237 +++++++++++++++++-
 .../declarative/fixtures/ecosystem/README.md  |   1 +
 .../async-template-string.spec.ts             |  57 +++++
 .../async-template-string/entry.html          |  14 ++
 .../fast-build.config.json                    |   6 +
 .../async-template-string/index.html          |  13 +
 .../ecosystem/async-template-string/main.ts   |  60 +++++
 .../async-template-string/state.json          |   4 +
 .../async-template-string/template-string.ts  |  12 +
 .../async-template-string/templates.html      |   0
 .../fast-element.declarativetemplate_1.md     |  64 +++++
 ...ast-element.declarativetemplatecallback.md |  27 ++
 ...ativetemplatecallbackcontext.definition.md |  24 ++
 ...ment.declarativetemplatecallbackcontext.md |  91 +++++++
 ...ecallbackcontext.templatestringresolver.md |  24 ++
 ...ent.declarativetemplateoptions.callback.md |  24 ++
 ...fast-element.declarativetemplateoptions.md |  71 ++++++
 ...ement.declarativetemplatestringresolver.md |  26 ++
 .../fast-element/declarative/fast-element.md  |  59 +++++
 .../defining-elements.md                      |  39 ++-
 .../src/docs/3.x/resources/export-sizes.md    |   2 +-
 31 files changed, 1037 insertions(+), 16 deletions(-)
 create mode 100644 change/@microsoft-fast-element-78e81f3e-f6be-4ebe-be05-ec6b62829ace.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/async-template-string.spec.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/entry.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/fast-build.config.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/index.html
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/main.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/state.json
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/template-string.ts
 create mode 100644 packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/templates.html
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate_1.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallback.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.definition.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.templatestringresolver.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.callback.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.md
 create mode 100644 sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatestringresolver.md

diff --git a/change/@microsoft-fast-element-78e81f3e-f6be-4ebe-be05-ec6b62829ace.json b/change/@microsoft-fast-element-78e81f3e-f6be-4ebe-be05-ec6b62829ace.json
new file mode 100644
index 00000000000..535d3c70ac7
--- /dev/null
+++ b/change/@microsoft-fast-element-78e81f3e-f6be-4ebe-be05-ec6b62829ace.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: allow declarativeTemplate callbacks to resolve templates from f-template strings",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index 752c5f110e5..d23cb16483d 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -351,6 +351,16 @@ the imperative `html` API:
 - The internal `<f-template>` publisher parses HTML and returns concrete
   `ViewTemplate` instances through the registry-aware declarative template
   bridge.
+- `declarativeTemplate({ callback })` registers a transient string publisher for
+  the definition's name. The callback receives the element definition and a
+  `templateStringResolver()` function, so it can load template markup with
+  async flows such as `import()` or `fetch()`. The resolver accepts either a
+  string or `Promise<string>`, validates that the resolved string contains
+  exactly one `<f-template>`, preserves attributes on that element, and then
+  routes it through the same publisher path as a connected `<f-template>`. The
+  callback must return or await the resolver promise; if it completes
+  successfully without calling `templateStringResolver()`, template resolution
+  rejects with a diagnostic error instead of waiting indefinitely.
 - `TemplateParser` lowers declarative syntax to the same `strings` / `values`
   shape used by `ViewTemplate.create()`.
 - `attributeMap()` and `observerMap()` are `FASTElementExtension` factories
@@ -577,7 +587,7 @@ src/
 │   └── di.ts              # DI container, decorators, resolvers, Registration
 ├── context.ts             # Context, FASTContext, Context protocol
 ├── declarative/
-│   ├── template.ts        # declarativeTemplate() and internal f-template publisher
+│   ├── template.ts        # declarativeTemplate(), string callback, internal f-template publisher
 │   ├── template-parser.ts # Declarative HTML parser → ViewTemplate strings/values
 │   ├── schema.ts          # Compatibility re-export for Schema
 │   ├── definition-options.ts # Compatibility re-export for schema transforms
diff --git a/packages/fast-element/README.md b/packages/fast-element/README.md
index 6d4a720f3ee..66fe8524099 100644
--- a/packages/fast-element/README.md
+++ b/packages/fast-element/README.md
@@ -139,6 +139,40 @@ MyElement.define({
 before `define()` resolves. Consumers should not import or define the
 `<f-template>` implementation directly.
 
+When template markup needs to be loaded or generated by JavaScript, pass a
+`callback` to `declarativeTemplate()`. The callback receives
+`templateStringResolver`, can perform async work such as dynamic imports or
+`fetch()`, and must return or await the resolver promise. The resolver accepts a
+string or `Promise<string>` that contains exactly one `<f-template>` element. If
+the callback completes successfully without calling the resolver, template
+resolution rejects with a diagnostic error. The `<f-template>` can include
+attributes such as `name`, and it must contain exactly one child `<template>`.
+
+```ts
+import { FASTElement } from "@microsoft/fast-element";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+class LazyElement extends FASTElement {}
+
+LazyElement.define({
+    name: "lazy-element",
+    template: declarativeTemplate({
+        async callback({ templateStringResolver }) {
+            const response = await fetch("/templates/lazy-element.html");
+            await templateStringResolver(response.text());
+        },
+    }),
+});
+```
+
+```html
+<f-template name="lazy-element" data-source="fetch">
+    <template>
+        <p>{{message}}</p>
+    </template>
+</f-template>
+```
+
 Declarative schema behavior is enabled with define extensions:
 
 ```ts
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index e6ac7937aa9..6b8b2bcccd9 100644
--- a/packages/fast-element/SIZES.md
+++ b/packages/fast-element/SIZES.md
@@ -19,7 +19,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.48 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
 | enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.19 KB | 11.88 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.45 KB | 16.46 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 60.33 KB | 18.92 KB | 16.84 KB |
 | ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.24 KB | 6.52 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.78 KB | 5.58 KB | 5.04 KB |
diff --git a/packages/fast-element/docs/declarative-html.md b/packages/fast-element/docs/declarative-html.md
index 254561718fe..d1faba188e8 100644
--- a/packages/fast-element/docs/declarative-html.md
+++ b/packages/fast-element/docs/declarative-html.md
@@ -7,8 +7,9 @@ The declarative entrypoint in `@microsoft/fast-element` interprets FAST
 declarative HTML syntax as a template for a FAST web component.
 
 This document focuses on declarative-runtime implementation details:
-template structure, prerendered markup requirements, lifecycle callbacks,
-binding configuration, syntax, and integration testing.
+template structure, async string template loading, prerendered markup
+requirements, lifecycle callbacks, binding configuration, syntax, and
+integration testing.
 
 For package installation, using `declarativeTemplate()`, extension setup, and
 the package-level hydration overview, see the
@@ -53,6 +54,44 @@ Example:
 The legacy `defer-hydration` and `needs-hydration` attributes are no longer
 required.
 
+## Async Template Strings
+
+Use `declarativeTemplate({ callback })` when the `<f-template>` markup should be
+loaded by JavaScript rather than provided as a connected DOM element. The
+callback receives the current element definition and a `templateStringResolver`.
+It may return a promise, so template strings can come from dynamic imports,
+`fetch()`, or another async source. The callback must return or await the
+resolver promise. The resolver accepts a string or `Promise<string>`, and
+template resolution rejects with a diagnostic error if the callback completes
+successfully without calling it.
+
+```typescript
+import { FASTElement } from "@microsoft/fast-element";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+class LazyElement extends FASTElement {}
+
+LazyElement.define({
+    name: "lazy-element",
+    template: declarativeTemplate({
+        async callback({ templateStringResolver }) {
+            const response = await fetch("/templates/lazy-element.html");
+            await templateStringResolver(response.text());
+        },
+    }),
+});
+```
+
+The resolved string must contain exactly one `<f-template>` element, and that
+`<f-template>` must contain exactly one child `<template>`. Attributes on the
+`<f-template>`, including `name`, are preserved before the template is parsed.
+
+```html
+<f-template name="lazy-element" data-source="fetch">
+    <template>{{message}}</template>
+</f-template>
+```
+
 ## Non-browser HTML Rendering
 
 One of the benefits of FAST declarative HTML templates is that the server can
@@ -69,7 +108,7 @@ hook into template processing and hydration. The callbacks are split by scope:
 
 | Scope | API | Callbacks |
 |---|---|---|
-| Per element | `declarativeTemplate(callbacks)` | `elementDidRegister`, `templateWillUpdate`, `templateDidUpdate`, `elementDidDefine`, `elementWillHydrate`, `elementDidHydrate` |
+| Per element | `declarativeTemplate(options)` | `callback`, `elementDidRegister`, `templateWillUpdate`, `templateDidUpdate`, `elementDidDefine`, `elementWillHydrate`, `elementDidHydrate` |
 | Global hydration | `enableHydration(options)` | `hydrationStarted`, `hydrationComplete` |
 
 Hydration is opt-in. Call `enableHydration()` before FAST elements connect when
diff --git a/packages/fast-element/docs/declarative/api-report.api.md b/packages/fast-element/docs/declarative/api-report.api.md
index dca727a0dab..9e81d7a1346 100644
--- a/packages/fast-element/docs/declarative/api-report.api.md
+++ b/packages/fast-element/docs/declarative/api-report.api.md
@@ -96,6 +96,26 @@ export type ConstructibleStyleStrategy = {
 // @public
 export function declarativeTemplate(callbacks?: TemplateLifecycleCallbacks): FASTElementTemplateResolver;
 
+// @public
+export function declarativeTemplate(options?: DeclarativeTemplateOptions): FASTElementTemplateResolver;
+
+// @public
+export type DeclarativeTemplateCallback = (context: DeclarativeTemplateCallbackContext) => void | Promise<void>;
+
+// @public
+export interface DeclarativeTemplateCallbackContext {
+    readonly definition: FASTElementDefinition;
+    readonly templateStringResolver: DeclarativeTemplateStringResolver;
+}
+
+// @public
+export interface DeclarativeTemplateOptions extends TemplateLifecycleCallbacks {
+    readonly callback?: DeclarativeTemplateCallback;
+}
+
+// @public
+export type DeclarativeTemplateStringResolver = (templateString: string | Promise<string>) => Promise<void>;
+
 // @public
 export interface DefaultCachedPath extends CachedPathCommon {
     // (undocumented)
diff --git a/packages/fast-element/src/declarative/debug.ts b/packages/fast-element/src/declarative/debug.ts
index 75602b9469b..a51406d8a93 100644
--- a/packages/fast-element/src/declarative/debug.ts
+++ b/packages/fast-element/src/declarative/debug.ts
@@ -5,4 +5,8 @@ export const debugMessages = {
         "There can only be one <template> inside the <f-template>; remove any extra <template> elements and keep exactly one for ${name}.",
     [2002 /* moreThanOneMatchingTemplateProvided */]:
         'There can only be one connected <f-template name="${name}"> in a registry while resolving a declarative template; remove duplicate matches for ${name}.',
+    [2003 /* invalidTemplateString */]:
+        "Declarative template strings for ${name} must contain exactly one <f-template> element.",
+    [2004 /* templateStringResolverNotCalled */]:
+        "The declarative template callback for ${name} completed without calling templateStringResolver(). Return or await templateStringResolver(...) with an <f-template> string.",
 };
diff --git a/packages/fast-element/src/declarative/index.ts b/packages/fast-element/src/declarative/index.ts
index 3f4906a62e7..7a6849c955a 100644
--- a/packages/fast-element/src/declarative/index.ts
+++ b/packages/fast-element/src/declarative/index.ts
@@ -50,5 +50,11 @@ export type {
     ViewTemplate,
 } from "../templating/template.js";
 export type { ElementView, HTMLView } from "../templating/view.js";
-export { declarativeTemplate } from "./template.js";
+export {
+    type DeclarativeTemplateCallback,
+    type DeclarativeTemplateCallbackContext,
+    type DeclarativeTemplateOptions,
+    type DeclarativeTemplateStringResolver,
+    declarativeTemplate,
+} from "./template.js";
 export { type ResolvedStringsAndValues, TemplateParser } from "./template-parser.js";
diff --git a/packages/fast-element/src/declarative/interfaces.ts b/packages/fast-element/src/declarative/interfaces.ts
index 632c4f2999b..0e2529892b3 100644
--- a/packages/fast-element/src/declarative/interfaces.ts
+++ b/packages/fast-element/src/declarative/interfaces.ts
@@ -6,4 +6,6 @@ export const enum Message {
     noTemplateProvided = 2000,
     moreThanOneTemplateProvided = 2001,
     moreThanOneMatchingTemplateProvided = 2002,
+    invalidTemplateString = 2003,
+    templateStringResolverNotCalled = 2004,
 }
diff --git a/packages/fast-element/src/declarative/template-bridge.pw.spec.ts b/packages/fast-element/src/declarative/template-bridge.pw.spec.ts
index 40a07193d9f..26062bfda10 100644
--- a/packages/fast-element/src/declarative/template-bridge.pw.spec.ts
+++ b/packages/fast-element/src/declarative/template-bridge.pw.spec.ts
@@ -656,6 +656,70 @@ test.describe("declarativeTemplate", () => {
         expect(result.shadowText).toContain("reconnected");
     });
 
+    test("rejects when callback completes without calling templateStringResolver", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const message = await page.evaluate(async () => {
+            // @ts-expect-error: Client module.
+            const { FASTElement, declarativeTemplate, uniqueElementName } = await import(
+                "/declarative-main.js"
+            );
+
+            const elementName = uniqueElementName();
+
+            class TestElement extends FASTElement {}
+
+            try {
+                await TestElement.define({
+                    name: elementName,
+                    template: declarativeTemplate({
+                        callback() {},
+                    }),
+                });
+                return "";
+            } catch (error) {
+                return (error as Error).message;
+            }
+        });
+
+        expect(message).toContain("completed without calling templateStringResolver()");
+    });
+
+    test("propagates promise rejection from templateStringResolver", async ({ page }) => {
+        await page.goto("/");
+
+        const message = await page.evaluate(async () => {
+            // @ts-expect-error: Client module.
+            const { FASTElement, declarativeTemplate, uniqueElementName } = await import(
+                "/declarative-main.js"
+            );
+
+            const elementName = uniqueElementName();
+
+            class TestElement extends FASTElement {}
+
+            try {
+                await TestElement.define({
+                    name: elementName,
+                    template: declarativeTemplate({
+                        callback({ templateStringResolver }) {
+                            return templateStringResolver(
+                                Promise.reject(new Error("template load failed")),
+                            );
+                        },
+                    }),
+                });
+                return "";
+            } catch (error) {
+                return (error as Error).message;
+            }
+        });
+
+        expect(message).toBe("template load failed");
+    });
+
     test("rejects duplicate matching templates with a clear error", async ({ page }) => {
         await page.goto("/");
 
diff --git a/packages/fast-element/src/declarative/template.ts b/packages/fast-element/src/declarative/template.ts
index ea0abbd426c..ae4dc43aa51 100644
--- a/packages/fast-element/src/declarative/template.ts
+++ b/packages/fast-element/src/declarative/template.ts
@@ -17,13 +17,73 @@ const templateElementName = "f-template";
 
 const ensuredTemplateElements = new WeakMap<CustomElementRegistry, Promise<void>>();
 
+type FTemplateElementConstructor = CustomElementConstructor & {
+    new (): FTemplateElement;
+};
+
 type MutableFASTElementDefinition = FASTElementDefinition & {
     lifecycleCallbacks?: TemplateLifecycleCallbacks;
 };
 
+/**
+ * Resolves a string, or a promise for a string, containing an `<f-template>`
+ * element for a declarative template callback.
+ *
+ * The resolved string must contain exactly one `<f-template>` element.
+ * Attributes on the `<f-template>` are preserved, and the `<f-template>` must
+ * contain exactly one child `<template>` element. The returned promise settles
+ * when string resolution and template creation complete.
+ * @public
+ */
+export type DeclarativeTemplateStringResolver = (
+    templateString: string | Promise<string>,
+) => Promise<void>;
+
+/**
+ * Context provided to a declarative template callback.
+ * @public
+ */
+export interface DeclarativeTemplateCallbackContext {
+    /**
+     * The FAST element definition whose template is being resolved.
+     */
+    readonly definition: FASTElementDefinition;
+
+    /**
+     * Resolves a string containing an `<f-template>` element into the template
+     * for the current definition.
+     */
+    readonly templateStringResolver: DeclarativeTemplateStringResolver;
+}
+
+/**
+ * Callback invoked while resolving a declarative template.
+ *
+ * The callback may complete asynchronously after dynamic imports, fetches, or
+ * other async template-loading work. It must return or await the promise from
+ * `templateStringResolver()`. If the callback completes successfully without
+ * calling `templateStringResolver()`, template resolution rejects.
+ * @public
+ */
+export type DeclarativeTemplateCallback = (
+    context: DeclarativeTemplateCallbackContext,
+) => void | Promise<void>;
+
+/**
+ * Options for `declarativeTemplate()`.
+ * @public
+ */
+export interface DeclarativeTemplateOptions extends TemplateLifecycleCallbacks {
+    /**
+     * Optional callback used to resolve an `<f-template>` from a string instead
+     * of a connected `<f-template>` element in the DOM.
+     */
+    readonly callback?: DeclarativeTemplateCallback;
+}
+
 function isTemplateElementConstructor(
     value: CustomElementConstructor | undefined,
-): boolean {
+): value is FTemplateElementConstructor {
     return value === FTemplateElement || value?.prototype instanceof FTemplateElement;
 }
 
@@ -86,6 +146,132 @@ function chainLifecycleCallback<TArgs extends unknown[]>(
     };
 }
 
+function createTemplateElementFromString(
+    templateString: string,
+    registry: CustomElementRegistry,
+    name: string,
+): FTemplateElement {
+    const container = document.createElement("template");
+    container.innerHTML = templateString;
+
+    const fragment = document.createDocumentFragment();
+    fragment.append(container.content);
+
+    const [source, ...additionalTemplates] = Array.from(
+        fragment.querySelectorAll(templateElementName),
+    );
+
+    if (source === void 0 || additionalTemplates.length > 0) {
+        throw FAST.error(Message.invalidTemplateString, { name });
+    }
+
+    const TemplateElement = registry.get(templateElementName);
+
+    if (!isTemplateElementConstructor(TemplateElement)) {
+        throw new Error(
+            "The <f-template> element must be defined before resolving a template string.",
+        );
+    }
+
+    const templateElement = new TemplateElement();
+
+    for (const attribute of Array.from(source.attributes)) {
+        templateElement.setAttribute(attribute.name, attribute.value);
+    }
+
+    templateElement.append(...Array.from(source.childNodes));
+
+    return templateElement;
+}
+
+class TemplateStringPublisher implements TemplatePublisher {
+    public constructor(private readonly callback: DeclarativeTemplateCallback) {}
+
+    public publishTemplate(
+        definition: FASTElementDefinition,
+    ): Promise<ElementViewTemplate> {
+        return new Promise((resolve, reject) => {
+            let settled = false;
+            let resolverCalled = false;
+            let resolverCompletion: Promise<void> | undefined;
+
+            const rejectTemplate = (error: unknown): void => {
+                if (settled) {
+                    return;
+                }
+
+                settled = true;
+                reject(error);
+            };
+
+            const resolveTemplate = (template: ElementViewTemplate): void => {
+                if (settled) {
+                    return;
+                }
+
+                settled = true;
+                resolve(template);
+            };
+
+            const templateStringResolver: DeclarativeTemplateStringResolver =
+                templateString => {
+                    if (settled) {
+                        return Promise.resolve();
+                    }
+
+                    if (resolverCompletion) {
+                        return resolverCompletion;
+                    }
+
+                    resolverCalled = true;
+
+                    const templatePromise = Promise.resolve(templateString).then(
+                        resolvedTemplateString => {
+                            const templateElement = createTemplateElementFromString(
+                                resolvedTemplateString,
+                                definition.registry,
+                                definition.name,
+                            );
+
+                            return templateElement.publishTemplate(definition);
+                        },
+                    );
+
+                    templatePromise.then(resolveTemplate, rejectTemplate);
+
+                    resolverCompletion = templatePromise.then(() => void 0);
+                    resolverCompletion.catch(() => {});
+
+                    return resolverCompletion;
+                };
+
+            Promise.resolve()
+                .then(() =>
+                    this.callback({
+                        definition,
+                        templateStringResolver,
+                    }),
+                )
+                .then(
+                    () => {
+                        if (!resolverCalled) {
+                            rejectTemplate(
+                                FAST.error(Message.templateStringResolverNotCalled, {
+                                    name: definition.name,
+                                }),
+                            );
+                        }
+                    },
+                    error => {
+                        if (!resolverCalled) {
+                            rejectTemplate(error);
+                        }
+                    },
+                );
+        });
+    }
+}
+
 /**
  * Returns a declarative template resolver that waits for the matching
  * `<f-template>` element and resolves it into a concrete `ViewTemplate`.
@@ -95,41 +281,76 @@ function chainLifecycleCallback<TArgs extends unknown[]>(
  */
 export function declarativeTemplate(
     callbacks?: TemplateLifecycleCallbacks,
+): FASTElementTemplateResolver;
+/**
+ * Returns a declarative template resolver that waits for the matching
+ * `<f-template>` element, or an `<f-template>` string supplied through
+ * `options.callback`, and resolves it into a concrete `ViewTemplate`.
+ *
+ * @param options - Optional per-element lifecycle callbacks and template
+ * callback.
+ * @public
+ */
+export function declarativeTemplate(
+    options?: DeclarativeTemplateOptions,
+): FASTElementTemplateResolver;
+export function declarativeTemplate(
+    options?: DeclarativeTemplateOptions,
 ): FASTElementTemplateResolver {
     ensureDeclarativeRuntime();
 
     return async definition => {
-        if (callbacks) {
+        if (options) {
             const existing = definition.lifecycleCallbacks;
             (definition as MutableFASTElementDefinition).lifecycleCallbacks = {
                 elementDidRegister: chainLifecycleCallback(
                     existing?.elementDidRegister,
-                    callbacks.elementDidRegister,
+                    options.elementDidRegister,
                 ),
                 templateWillUpdate: chainLifecycleCallback(
                     existing?.templateWillUpdate,
-                    callbacks.templateWillUpdate,
+                    options.templateWillUpdate,
                 ),
                 templateDidUpdate: chainLifecycleCallback(
                     existing?.templateDidUpdate,
-                    callbacks.templateDidUpdate,
+                    options.templateDidUpdate,
                 ),
                 elementDidDefine: chainLifecycleCallback(
                     existing?.elementDidDefine,
-                    callbacks.elementDidDefine,
+                    options.elementDidDefine,
                 ),
                 elementWillHydrate: chainLifecycleCallback(
                     existing?.elementWillHydrate,
-                    callbacks.elementWillHydrate,
+                    options.elementWillHydrate,
                 ),
                 elementDidHydrate: chainLifecycleCallback(
                     existing?.elementDidHydrate,
-                    callbacks.elementDidHydrate,
+                    options.elementDidHydrate,
                 ),
             };
         }
 
         await ensureTemplateElementDefined(definition.registry);
+
+        if (options?.callback) {
+            const publisher = new TemplateStringPublisher(options.callback);
+            declarativeTemplateBridge.registerPublisher(
+                definition.registry,
+                definition.name,
+                publisher,
+            );
+
+            try {
+                return await declarativeTemplateBridge.requestTemplate(definition);
+            } finally {
+                declarativeTemplateBridge.unregisterPublisher(
+                    definition.registry,
+                    definition.name,
+                    publisher,
+                );
+            }
+        }
+
         return declarativeTemplateBridge.requestTemplate(definition);
     };
 }
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/README.md b/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
index 5ab0e0c9ff1..a1c11593415 100644
--- a/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/README.md
@@ -6,6 +6,7 @@ performance monitoring.
 
 | Fixture | Description |
 |---|---|
+| `async-template-string` | Promise-compatible `declarativeTemplate({ callback })` resolution from an imported string containing `<f-template>`. |
 | `errors` | Error handling and edge cases in template rendering. |
 | `lifecycle-callbacks` | `declarativeTemplate()` and `enableHydration()` lifecycle callbacks such as `elementDidRegister`, `elementDidHydrate`, and `hydrationComplete`. |
 | `performance-metrics` | Performance monitoring and measurements during the component lifecycle. |
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/async-template-string.spec.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/async-template-string.spec.ts
new file mode 100644
index 00000000000..4aeea9a01e8
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/async-template-string.spec.ts
@@ -0,0 +1,57 @@
+import { expect, type Locator, type Page, test } from "@playwright/test";
+
+async function gotoFixture(page: Page): Promise<Locator> {
+    await page.goto("/fixtures/ecosystem/async-template-string/");
+    await page.waitForFunction(() => (window as any).allDefined === true);
+
+    return page.locator("async-template-card");
+}
+
+test.describe("Async Template String", () => {
+    test("renders a dynamically imported template string", async ({ page }) => {
+        const element = await gotoFixture(page);
+
+        await expect(element.locator("h2")).toHaveText("Async string template");
+        await expect(element.locator("#description")).toHaveText(
+            "Loaded from an async template string.",
+        );
+        await expect(element.locator("#count")).toHaveText("Count: 0");
+        await expect(element.locator("section")).toHaveAttribute(
+            "data-message",
+            "Async string template",
+        );
+
+        const callbackEvents = await page.evaluate(
+            () => (window as any).templateCallbackEvents,
+        );
+
+        expect(callbackEvents).toEqual(["callback-start", "callback-resolved"]);
+    });
+
+    test("preserves lifecycle callbacks and interactivity", async ({ page }) => {
+        const element = await gotoFixture(page);
+
+        await element.locator("button").click();
+        await expect(element.locator("#count")).toHaveText("Count: 1");
+
+        const events = await page.evaluate(() => (window as any).lifecycleEvents);
+        const callbacks = events
+            .filter((event: any) => event.name === "async-template-card")
+            .map((event: any) => event.callback);
+
+        expect(callbacks).toContain("elementDidRegister");
+        expect(callbacks).toContain("templateWillUpdate");
+        expect(callbacks).toContain("templateDidUpdate");
+        expect(callbacks).toContain("elementDidDefine");
+
+        expect(callbacks.indexOf("elementDidRegister")).toBeLessThan(
+            callbacks.indexOf("templateWillUpdate"),
+        );
+        expect(callbacks.indexOf("templateWillUpdate")).toBeLessThan(
+            callbacks.indexOf("templateDidUpdate"),
+        );
+        expect(callbacks.indexOf("templateDidUpdate")).toBeLessThan(
+            callbacks.indexOf("elementDidDefine"),
+        );
+    });
+});
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/entry.html b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/entry.html
new file mode 100644
index 00000000000..a2bcecb5179
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/entry.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Async Template String</title>
+    </head>
+    <body>
+        <async-template-card
+            message="{{message}}"
+            description="{{description}}"
+        ></async-template-card>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/fast-build.config.json b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/fast-build.config.json
new file mode 100644
index 00000000000..c291972cdad
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/fast-build.config.json
@@ -0,0 +1,6 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html"
+}
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/index.html b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/index.html
new file mode 100644
index 00000000000..5753dc91287
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Async Template String</title>
+    </head>
+    <body>
+        <async-template-card message="Async string template" description="Loaded from an async template string."></async-template-card>
+
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/main.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/main.ts
new file mode 100644
index 00000000000..ec679f1a2e3
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/main.ts
@@ -0,0 +1,60 @@
+import { attr } from "@microsoft/fast-element/attr.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import { observable } from "@microsoft/fast-element/observable.js";
+
+type LifecycleEvent = { callback: string; name?: string };
+
+const lifecycleEvents: LifecycleEvent[] = [];
+const templateCallbackEvents: string[] = [];
+
+class AsyncTemplateCard extends FASTElement {
+    @attr
+    message: string = "Async string template";
+
+    @attr
+    description: string = "Loaded from an async template string.";
+
+    @observable
+    count: number = 0;
+
+    increment(): void {
+        this.count++;
+    }
+}
+
+AsyncTemplateCard.define({
+    name: "async-template-card",
+    template: declarativeTemplate({
+        async callback({ definition, templateStringResolver }) {
+            templateCallbackEvents.push("callback-start");
+
+            const asyncTemplateString = import("./template-string.js").then(
+                module => module.asyncTemplateString,
+            );
+
+            if (definition.name !== "async-template-card") {
+                throw new Error(`Unexpected template definition: ${definition.name}`);
+            }
+
+            await templateStringResolver(asyncTemplateString);
+            templateCallbackEvents.push("callback-resolved");
+        },
+        elementDidRegister(name: string): void {
+            lifecycleEvents.push({ callback: "elementDidRegister", name });
+        },
+        templateWillUpdate(name: string): void {
+            lifecycleEvents.push({ callback: "templateWillUpdate", name });
+        },
+        templateDidUpdate(name: string): void {
+            lifecycleEvents.push({ callback: "templateDidUpdate", name });
+        },
+        elementDidDefine(name: string): void {
+            lifecycleEvents.push({ callback: "elementDidDefine", name });
+            (window as any).allDefined = true;
+        },
+    }),
+});
+
+(window as any).lifecycleEvents = lifecycleEvents;
+(window as any).templateCallbackEvents = templateCallbackEvents;
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/state.json b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/state.json
new file mode 100644
index 00000000000..71d58a14bc5
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/state.json
@@ -0,0 +1,4 @@
+{
+    "message": "Async string template",
+    "description": "Loaded from an async template string."
+}
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/template-string.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/template-string.ts
new file mode 100644
index 00000000000..09047f40471
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/template-string.ts
@@ -0,0 +1,12 @@
+export const asyncTemplateString = `
+<f-template name="async-template-card" data-source="dynamic-import">
+    <template>
+        <section data-message="{{message}}">
+            <h2>{{message}}</h2>
+            <p id="description">{{description}}</p>
+            <button type="button" @click="{increment()}">Increment</button>
+            <span id="count">Count: {{count}}</span>
+        </section>
+    </template>
+</f-template>
+`;
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/templates.html b/packages/fast-element/test/declarative/fixtures/ecosystem/async-template-string/templates.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate_1.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate_1.md
new file mode 100644
index 00000000000..aed447bb284
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate_1.md
@@ -0,0 +1,64 @@
+---
+id: "fast-element.declarativetemplate_1"
+title: "declarativeTemplate() function"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplate_1"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "declarativeTemplate() function"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplate_1"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [declarativeTemplate](../fast-element.declarativetemplate_1/index.html)
+
+## declarativeTemplate() function
+
+Returns a declarative template resolver that waits for the matching `<f-template>` element, or an `<f-template>` string supplied through `options.callback`<!-- -->, and resolves it into a concrete `ViewTemplate`<!-- -->.
+
+**Signature:**
+
+```typescript
+export declare function declarativeTemplate(options?: DeclarativeTemplateOptions): FASTElementTemplateResolver;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+options
+
+
+</td><td>
+
+[DeclarativeTemplateOptions](../fast-element.declarativetemplateoptions/)
+
+
+</td><td>
+
+_(Optional)_ Optional per-element lifecycle callbacks and template callback.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+[FASTElementTemplateResolver](../fast-element.fastelementtemplateresolver/)
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallback.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallback.md
new file mode 100644
index 00000000000..527738f94ee
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallback.md
@@ -0,0 +1,27 @@
+---
+id: "fast-element.declarativetemplatecallback"
+title: "DeclarativeTemplateCallback type"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplatecallback"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateCallback type"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplatecallback"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateCallback](../fast-element.declarativetemplatecallback/index.html)
+
+## DeclarativeTemplateCallback type
+
+Callback invoked while resolving a declarative template.
+
+The callback may complete asynchronously after dynamic imports, fetches, or other async template-loading work. It must return or await the promise from `templateStringResolver()`<!-- -->. If the callback completes successfully without calling `templateStringResolver()`<!-- -->, template resolution rejects.
+
+**Signature:**
+
+```typescript
+export type DeclarativeTemplateCallback = (context: DeclarativeTemplateCallbackContext) => void | Promise<void>;
+```
+**References:** [DeclarativeTemplateCallbackContext](../fast-element.declarativetemplatecallbackcontext/)
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.definition.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.definition.md
new file mode 100644
index 00000000000..8cdff2165f2
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.definition.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.declarativetemplatecallbackcontext.definition"
+title: "DeclarativeTemplateCallbackContext.definition property"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext.definition"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateCallbackContext.definition property"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext.definition"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateCallbackContext](../fast-element.declarativetemplatecallbackcontext/index.html) &gt; [definition](../fast-element.declarativetemplatecallbackcontext.definition/index.html)
+
+## DeclarativeTemplateCallbackContext.definition property
+
+The FAST element definition whose template is being resolved.
+
+**Signature:**
+
+```typescript
+readonly definition: FASTElementDefinition;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.md
new file mode 100644
index 00000000000..43addb7b339
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.md
@@ -0,0 +1,91 @@
+---
+id: "fast-element.declarativetemplatecallbackcontext"
+title: "DeclarativeTemplateCallbackContext interface"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateCallbackContext interface"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateCallbackContext](../fast-element.declarativetemplatecallbackcontext/index.html)
+
+## DeclarativeTemplateCallbackContext interface
+
+Context provided to a declarative template callback.
+
+**Signature:**
+
+```typescript
+export interface DeclarativeTemplateCallbackContext
+```
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[definition](../fast-element.declarativetemplatecallbackcontext.definition/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+[FASTElementDefinition](../fast-element.fastelementdefinition/)
+
+
+</td><td>
+
+The FAST element definition whose template is being resolved.
+
+
+</td></tr>
+<tr><td>
+
+[templateStringResolver](../fast-element.declarativetemplatecallbackcontext.templatestringresolver/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+[DeclarativeTemplateStringResolver](../fast-element.declarativetemplatestringresolver/)
+
+
+</td><td>
+
+Resolves a string containing an `<f-template>` element into the template for the current definition.
+
+
+</td></tr>
+</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.templatestringresolver.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.templatestringresolver.md
new file mode 100644
index 00000000000..878c11d0536
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatecallbackcontext.templatestringresolver.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.declarativetemplatecallbackcontext.templatestringresolver"
+title: "DeclarativeTemplateCallbackContext.templateStringResolver property"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext.templatestringresolver"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateCallbackContext.templateStringResolver property"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplatecallbackcontext.templatestringresolver"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateCallbackContext](../fast-element.declarativetemplatecallbackcontext/index.html) &gt; [templateStringResolver](../fast-element.declarativetemplatecallbackcontext.templatestringresolver/index.html)
+
+## DeclarativeTemplateCallbackContext.templateStringResolver property
+
+Resolves a string containing an `<f-template>` element into the template for the current definition.
+
+**Signature:**
+
+```typescript
+readonly templateStringResolver: DeclarativeTemplateStringResolver;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.callback.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.callback.md
new file mode 100644
index 00000000000..0771b0893d2
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.callback.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.declarativetemplateoptions.callback"
+title: "DeclarativeTemplateOptions.callback property"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplateoptions.callback"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateOptions.callback property"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplateoptions.callback"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateOptions](../fast-element.declarativetemplateoptions/index.html) &gt; [callback](../fast-element.declarativetemplateoptions.callback/index.html)
+
+## DeclarativeTemplateOptions.callback property
+
+Optional callback used to resolve an `<f-template>` from a string instead of a connected `<f-template>` element in the DOM.
+
+**Signature:**
+
+```typescript
+readonly callback?: DeclarativeTemplateCallback;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.md
new file mode 100644
index 00000000000..0194a267851
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplateoptions.md
@@ -0,0 +1,71 @@
+---
+id: "fast-element.declarativetemplateoptions"
+title: "DeclarativeTemplateOptions interface"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplateoptions"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateOptions interface"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplateoptions"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateOptions](../fast-element.declarativetemplateoptions/index.html)
+
+## DeclarativeTemplateOptions interface
+
+Options for `declarativeTemplate()`<!-- -->.
+
+**Signature:**
+
+```typescript
+export interface DeclarativeTemplateOptions extends TemplateLifecycleCallbacks
+```
+**Extends:** [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/)
+
+## Properties
+
+<table><thead><tr><th>
+
+Property
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[callback?](../fast-element.declarativetemplateoptions.callback/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+[DeclarativeTemplateCallback](../fast-element.declarativetemplatecallback/)
+
+
+</td><td>
+
+_(Optional)_ Optional callback used to resolve an `<f-template>` from a string instead of a connected `<f-template>` element in the DOM.
+
+
+</td></tr>
+</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatestringresolver.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatestringresolver.md
new file mode 100644
index 00000000000..704d8eed06c
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplatestringresolver.md
@@ -0,0 +1,26 @@
+---
+id: "fast-element.declarativetemplatestringresolver"
+title: "DeclarativeTemplateStringResolver type"
+layout: 3x-api
+eleventyNavigation:
+  key: "declarative.jsapi3xfast-element.declarativetemplatestringresolver"
+  parent: "@microsoft/fast-element/declarative.js3x"
+  title: "DeclarativeTemplateStringResolver type"
+navigationOptions:
+  activeKey: "declarative.jsapi3xfast-element.declarativetemplatestringresolver"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [DeclarativeTemplateStringResolver](../fast-element.declarativetemplatestringresolver/index.html)
+
+## DeclarativeTemplateStringResolver type
+
+Resolves a string, or a promise for a string, containing an `<f-template>` element for a declarative template callback.
+
+The resolved string must contain exactly one `<f-template>` element. Attributes on the `<f-template>` are preserved, and the `<f-template>` must contain exactly one child `<template>` element. The returned promise settles when string resolution and template creation complete.
+
+**Signature:**
+
+```typescript
+export type DeclarativeTemplateStringResolver = (templateString: string | Promise<string>) => Promise<void>;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.md
index b14c1edae2a..f418e8080bf 100644
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.md
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.md
@@ -133,6 +133,17 @@ Description
 Returns a declarative template resolver that waits for the matching `<f-template>` element and resolves it into a concrete `ViewTemplate`<!-- -->.
 
 
+</td></tr>
+<tr><td>
+
+[declarativeTemplate(options)](../fast-element.declarativetemplate_1/)
+
+
+</td><td>
+
+Returns a declarative template resolver that waits for the matching `<f-template>` element, or an `<f-template>` string supplied through `options.callback`<!-- -->, and resolves it into a concrete `ViewTemplate`<!-- -->.
+
+
 </td></tr>
 </tbody></table>
 
@@ -203,6 +214,28 @@ A marker interface used to capture types when interpolating Directive helpers in
 Describes a child custom element binding referenced by a schema path.
 
 
+</td></tr>
+<tr><td>
+
+[DeclarativeTemplateCallbackContext](../fast-element.declarativetemplatecallbackcontext/)
+
+
+</td><td>
+
+Context provided to a declarative template callback.
+
+
+</td></tr>
+<tr><td>
+
+[DeclarativeTemplateOptions](../fast-element.declarativetemplateoptions/)
+
+
+</td><td>
+
+Options for `declarativeTemplate()`<!-- -->.
+
+
 </td></tr>
 <tr><td>
 
@@ -563,6 +596,32 @@ Represents a type which can be constructed with the new operator.
 A type that instantiates a StyleStrategy.
 
 
+</td></tr>
+<tr><td>
+
+[DeclarativeTemplateCallback](../fast-element.declarativetemplatecallback/)
+
+
+</td><td>
+
+Callback invoked while resolving a declarative template.
+
+The callback may complete asynchronously after dynamic imports, fetches, or other async template-loading work. It must return or await the promise from `templateStringResolver()`<!-- -->. If the callback completes successfully without calling `templateStringResolver()`<!-- -->, template resolution rejects.
+
+
+</td></tr>
+<tr><td>
+
+[DeclarativeTemplateStringResolver](../fast-element.declarativetemplatestringresolver/)
+
+
+</td><td>
+
+Resolves a string, or a promise for a string, containing an `<f-template>` element for a declarative template callback.
+
+The resolved string must contain exactly one `<f-template>` element. Attributes on the `<f-template>` are preserved, and the `<f-template>` must contain exactly one child `<template>` element. The returned promise settles when string resolution and template creation complete.
+
+
 </td></tr>
 <tr><td>
 
diff --git a/sites/website/src/docs/3.x/declarative-templates/defining-elements.md b/sites/website/src/docs/3.x/declarative-templates/defining-elements.md
index 437780f0dc6..f80d4cf3515 100644
--- a/sites/website/src/docs/3.x/declarative-templates/defining-elements.md
+++ b/sites/website/src/docs/3.x/declarative-templates/defining-elements.md
@@ -8,7 +8,7 @@ eleventyNavigation:
   title: Defining Elements
 navigationOptions:
   activeKey: declarative-defining-elements3x
-description: Learn how to register declarative FASTElement components and use observerMap and attributeMap extensions.
+description: Learn how to register declarative FASTElement components, load template strings, and use observerMap and attributeMap extensions.
 keywords:
   - FASTElement
   - declarative
@@ -59,6 +59,43 @@ The `template: declarativeTemplate()` setting tells FAST to wait for a matching
 The `<f-template>` elements must be present in the DOM when the component definition resolves. A common pattern is to include the `<f-template>` elements directly in the HTML page before the script module loads.
 :::
 
+## Loading Template Strings
+
+Use `declarativeTemplate({ callback })` when an element's `<f-template>` should
+be loaded by JavaScript instead of a connected DOM element. The callback
+receives a `templateStringResolver` and can perform async work, including
+dynamic imports or `fetch()`. The callback must return or await the resolver
+promise. The resolver accepts a string or `Promise<string>`, and template
+resolution rejects with a diagnostic error if the callback completes
+successfully without calling it.
+
+```ts
+import { FASTElement } from "@microsoft/fast-element";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+class LazyElement extends FASTElement {}
+
+LazyElement.define({
+    name: "lazy-element",
+    template: declarativeTemplate({
+        async callback({ templateStringResolver }) {
+            const response = await fetch("/templates/lazy-element.html");
+            await templateStringResolver(response.text());
+        },
+    }),
+});
+```
+
+The resolved string passed to `templateStringResolver()` must contain exactly one
+`<f-template>` element. Attributes on the `<f-template>` are preserved, and the
+`<f-template>` must contain exactly one child `<template>`.
+
+```html
+<f-template name="lazy-element" data-source="fetch">
+    <template>{{message}}</template>
+</f-template>
+```
+
 ## Complete File Structure
 
 A typical declarative component setup involves these files:
diff --git a/sites/website/src/docs/3.x/resources/export-sizes.md b/sites/website/src/docs/3.x/resources/export-sizes.md
index 2325b5bf688..58e2803bbc2 100644
--- a/sites/website/src/docs/3.x/resources/export-sizes.md
+++ b/sites/website/src/docs/3.x/resources/export-sizes.md
@@ -34,7 +34,7 @@ Bundle sizes for `@microsoft/fast-element` exports.
 | repeat (@microsoft/fast-element/repeat.js) | 29.57 KB | 9.41 KB | 8.48 KB |
 | css (@microsoft/fast-element/css.js) | 2.43 KB | 1.00 KB | 911 B |
 | enableHydration (@microsoft/fast-element/hydration.js) | 43.27 KB | 13.19 KB | 11.88 KB |
-| declarativeTemplate (@microsoft/fast-element/declarative.js) | 58.77 KB | 18.45 KB | 16.46 KB |
+| declarativeTemplate (@microsoft/fast-element/declarative.js) | 60.33 KB | 18.92 KB | 16.84 KB |
 | ArrayObserver (@microsoft/fast-element/array-observer.js) | 12.51 KB | 4.45 KB | 4.01 KB |
 | observerMap (@microsoft/fast-element/observer-map.js) | 20.41 KB | 7.24 KB | 6.52 KB |
 | attributeMap (@microsoft/fast-element/attribute-map.js) | 15.78 KB | 5.58 KB | 5.04 KB |