diff --git a/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json b/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json
new file mode 100644
index 00000000000..e068df1b4c9
--- /dev/null
+++ b/change/@microsoft-fast-element-bfa58c92-2d69-4eea-b132-64dbe65d1663.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: modularize hydration and expose lifecycle callbacks via enableHydration() and declarativeTemplate()",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json b/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json
new file mode 100644
index 00000000000..3af1bd0477b
--- /dev/null
+++ b/change/@microsoft-fast-router-de58ce36-92f3-4c7f-86a2-43a66a522f81.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update imports for styles.js subpath export",
+  "packageName": "@microsoft/fast-router",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/examples/todo-app/src/todo-app.styles.ts b/examples/todo-app/src/todo-app.styles.ts
index 9902de9f1e1..4d6c0366e4b 100644
--- a/examples/todo-app/src/todo-app.styles.ts
+++ b/examples/todo-app/src/todo-app.styles.ts
@@ -1,4 +1,4 @@
-import { css } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 export const styles = css`
     :host {
diff --git a/examples/todo-app/src/todo-form.styles.ts b/examples/todo-app/src/todo-form.styles.ts
index 94d2d95b360..56c210c60c7 100644
--- a/examples/todo-app/src/todo-form.styles.ts
+++ b/examples/todo-app/src/todo-form.styles.ts
@@ -1,4 +1,4 @@
-import { css } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 export const styles = css`
     form {
diff --git a/packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md b/packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md
index 20877036fd1..58c41ea6e37 100644
--- a/packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md
+++ b/packages/fast-element/DECLARATIVE_RENDERING_LIFECYCLE.md
@@ -96,10 +96,11 @@ Once the template is attached to the partial definition, the element completes i
 When custom elements are instantiated in the DOM, the following occurs:
 
 1. **Element Creation**: The platform creates instances of the custom element
-2. **Prerendered Content Detection**: `ElementController` detects the existing shadow root from SSR and sets `isPrerendered = true`
-3. **Concrete Template Ready**: Because `declarativeTemplate()` resolved during
+2. **Prerendered Content Detection**: `ElementController` detects the existing shadow root from SSR — `isPrerendered` resolves `true`
+3. **Hydration Check**: If `enableHydration()` was called and the template is hydratable, the element hydrates — `isHydrated` resolves `true`. Otherwise it falls back to client-side rendering.
+4. **Concrete Template Ready**: Because `declarativeTemplate()` resolved during
    definition, `connect()` starts with the final template already attached.
-4. **Hydration**: `ElementController` uses `template.hydrate()` to create a
+5. **Hydration**: `ElementController` uses `template.hydrate()` to create a
    `HydrationView` that maps existing DOM nodes to binding targets using `fe:b`
    / `fe:/b` markers
 
@@ -154,23 +155,21 @@ FAST HTML provides a set of lifecycle callbacks that allow you to hook into vari
 
 ### Available Callbacks
 
-The lifecycle callbacks are organized into three categories:
+The lifecycle callbacks are split between two APIs:
 
-**Template Registration Callbacks:**
+**Per-element callbacks** — passed to `declarativeTemplate()`:
 - `elementDidRegister(name: string)` - Called after the JavaScript class definition has been registered as a partial definition
 - `templateWillUpdate(name: string)` - Called before the template has been evaluated and assigned to the definition
-
-**Template Processing Callbacks:**
 - `templateDidUpdate(name: string)` - Called after the template has been assigned to the definition
 - `elementDidDefine(name: string)` - Called after the custom element has been fully defined with the platform
-
-**Hydration Callbacks:**
-- `hydrationStarted()` - Called once when the first prerendered element begins hydrating
 - `elementWillHydrate(source: HTMLElement)` - Called before an element begins hydration
 - `elementDidHydrate(source: HTMLElement)` - Called after an element completes hydration
+
+**Global hydration callbacks** — passed to `enableHydration()`:
+- `hydrationStarted()` - Called once when the first prerendered element begins hydrating
 - `hydrationComplete()` - Called once after all prerendered elements have completed hydration
 
-Hydration callbacks are tracked at the element level by `ElementController`. The `hydrationComplete` callback fires only after every prerendered element has finished binding.
+The `hydrationComplete` callback fires only after every prerendered element has finished binding.
 
 ### Callback Execution Order
 
@@ -186,7 +185,7 @@ Template Processing Phase (asynchronous):
   4. templateDidUpdate(name)
   5. elementDidDefine(name)
   
-Hydration Phase (per element):
+Hydration Phase (per element, only when enableHydration() has been called):
   6. hydrationStarted()           [once, on first element]
   7. elementWillHydrate(source)
   8. [Hydration occurs]
@@ -200,33 +199,46 @@ Completion (called once for all elements):
 
 ### Configuring Callbacks
 
-Configure callbacks using `TemplateElement.config()` before defining the template element:
+Hydration must be explicitly opted into by calling `enableHydration()`. Per-element
+callbacks are passed directly to `declarativeTemplate()`:
 
 ```typescript
-import { TemplateElement, type HydrationLifecycleCallbacks } from "@microsoft/fast-element/declarative.js";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
 
-TemplateElement.config({
-    elementDidRegister(name) {
-        console.log(`${name} registered`);
-    },
-    templateWillUpdate(name) {
-        console.log(`${name} template updating`);
-    },
-    templateDidUpdate(name) {
-        console.log(`${name} template updated`);
-    },
-    elementDidDefine(name) {
-        console.log(`${name} fully defined`);
-    },
-    elementWillHydrate(source) {
-        console.log(`${source.localName} starting hydration`);
-    },
-    elementDidHydrate(source) {
-        console.log(`${source.localName} hydrated`);
+// Global hydration events
+enableHydration({
+    hydrationStarted() {
+        console.log("Hydration started");
     },
     hydrationComplete() {
-        console.log('All elements hydrated');
-    }
+        console.log("All elements hydrated");
+    },
+});
+
+// Per-element lifecycle callbacks
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementDidRegister(name) {
+            console.log(`${name} registered`);
+        },
+        templateWillUpdate(name) {
+            console.log(`${name} template updating`);
+        },
+        templateDidUpdate(name) {
+            console.log(`${name} template updated`);
+        },
+        elementDidDefine(name) {
+            console.log(`${name} fully defined`);
+        },
+        elementWillHydrate(source) {
+            console.log(`${source.localName} starting hydration`);
+        },
+        elementDidHydrate(source) {
+            console.log(`${source.localName} hydrated`);
+        },
+    }),
 });
 ```
 
@@ -234,30 +246,43 @@ TemplateElement.config({
 
 **Performance Monitoring:**
 ```typescript
-TemplateElement.config({
-    elementWillHydrate(source) {
-        performance.mark(`${source.localName}-hydration-start`);
-    },
-    elementDidHydrate(source) {
-        performance.mark(`${source.localName}-hydration-end`);
-        performance.measure(`${source.localName}-hydration`, `${source.localName}-hydration-start`, `${source.localName}-hydration-end`);
-    },
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+enableHydration({
     hydrationComplete() {
-        const measures = performance.getEntriesByType('measure');
+        const measures = performance.getEntriesByType("measure");
         // Send metrics to analytics
-    }
+    },
+});
+
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementWillHydrate(source) {
+            performance.mark(`${source.localName}-hydration-start`);
+        },
+        elementDidHydrate(source) {
+            performance.mark(`${source.localName}-hydration-end`);
+            performance.measure(
+                `${source.localName}-hydration`,
+                `${source.localName}-hydration-start`,
+                `${source.localName}-hydration-end`,
+            );
+        },
+    }),
 });
 ```
 
 **Loading State Management:**
 ```typescript
-TemplateElement.config({
+enableHydration({
     hydrationStarted() {
-        document.body.classList.add('hydrating');
+        document.body.classList.add("hydrating");
     },
     hydrationComplete() {
-        document.body.classList.remove('hydrating');
-        document.body.classList.add('interactive');
-    }
+        document.body.classList.remove("hydrating");
+        document.body.classList.add("interactive");
+    },
 });
 ```
diff --git a/packages/fast-element/DESIGN.md b/packages/fast-element/DESIGN.md
index e59a9212537..a0b225c8085 100644
--- a/packages/fast-element/DESIGN.md
+++ b/packages/fast-element/DESIGN.md
@@ -10,7 +10,7 @@ For deep dives into specific areas, see the linked detailed documents.
 
 1. [High-Level Overview](#high-level-overview)
 2. [Core Concepts](#core-concepts)
-   - [FAST Global](#fast-global)
+   - [FAST Object](#fast-object)
    - [FASTElement & ElementController](#fastelement--elementcontroller)
    - [Observables & Notifiers](#observables--notifiers)
    - [Bindings](#bindings)
@@ -49,30 +49,22 @@ For deep dives into specific areas, see the linked detailed documents.
 | Context protocol | W3C community Context protocol (`Context.create`, `Context.for`) |
 | Reactive state helpers | `state()`, `watch()` (beta) |
 
-The library's kernel (the `FAST` global, the `Updates` queue, and the `Observable` system) is stored on `globalThis.FAST`.
-
-The v3 runtime assumes native `globalThis`. `src/polyfills.ts` only backfills
-`requestIdleCallback` / `cancelIdleCallback`, so applications targeting older
-engines must install their own `globalThis` polyfill before FAST loads.
+The library's kernel (the `FAST` object, the `Updates` queue, and the `Observable` system) is module-scoped — imported from `@microsoft/fast-element` rather than stored on `globalThis`.
 
 ---
 
 ## Core Concepts
 
-### FAST Global
+### FAST Object
 
 **File**: `src/platform.ts`, `src/interfaces.ts`
 
-`FAST` is a singleton object attached to `globalThis`. It provides:
+`FAST` is a module-scoped singleton exported from `@microsoft/fast-element`. It is **not** attached to `globalThis`. It provides:
 
-- `FAST.getById(id, initializer)` – shared kernel slot registry (used to share the update queue and observable system across FAST instances)
 - `FAST.warn(code, values)` / `FAST.error(code, values)` – structured diagnostic messages
 - `FAST.addMessages(dict)` – registers human-readable debug messages used by `enableDebug()` and declarative runtime diagnostics
 
-The `KernelServiceId` enum provides the fixed numeric keys used for shared
-services on the `FAST` global. These stable IDs let FAST instances on the same
-page reuse the update queue, observable system, context event, and element
-registry.
+The previous `FAST.getById()` slot registry, `FASTGlobal` type, and `KernelServiceId` enum have been removed. Kernel services (update queue, observable system, etc.) are resolved through standard ES module imports rather than a shared global registry.
 
 ---
 
@@ -90,15 +82,15 @@ registry.
 
 `ElementController` is the real workhorse. It:
 
-- Extends `PropertyChangeNotifier` so the element itself participates in the observable system.
+- Uses composition with an internal `_notifier` field (rather than extending `PropertyChangeNotifier`) and implements the `Notifier` interface directly, so the element still participates in the observable system.
 - Holds the element's `FASTElementDefinition` (name, template, styles, observed attributes).
 - Manages a `Stages` state machine: `disconnected → connecting → connected → disconnecting → disconnected`.
-- Exposes `isPrerendered: Promise<boolean>` which resolves to `true` after prerendered content has been hydrated, or `false` when the component is client-side rendered. The `ViewController` interface also exposes `isPrerendered` as `Promise<boolean>` for custom directives. Attribute-skip logic during the hydration bind uses an internal `_skipAttrUpdates` flag that is never exposed as a public boolean.
+- Exposes `isPrerendered: Promise<boolean>` which resolves to `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran. Exposes `isHydrated: Promise<boolean>` which resolves to `true` only when hydration actually ran successfully. The `ViewController` interface also exposes both `isPrerendered` and `isHydrated` as `Promise<boolean>` for custom directives. Attribute-skip logic during the hydration bind uses an internal `_skipAttrUpdates` flag that is never exposed as a public boolean.
 - On `connect()`: restores pre-upgrade observable values, calls `connectedCallback` on all `HostBehavior`s, renders the current template into the shadow root when one is available, and applies styles.
-- Rendering is split into two modular paths via `renderPrerendered()` and `renderClientSide()`:
-  - **Prerendered**: `renderPrerendered()` registers the element in the static hydration tracker, swaps `onAttributeChangedCallback` to a no-op so the upgrade-time burst of callbacks is discarded, hydrates the existing DOM via `template.hydrate()`, then restores the standard handler and removes the element from the tracker. After this point, all future attribute changes flow through the real handler with zero overhead.
+- Rendering is split into two modular paths. Hydration is pluggable: `enableHydration()` from `@microsoft/fast-element/hydration.js` installs a hook via `ElementController.installHydrationHook()`, keeping zero hydration imports in the core controller:
+  - **Prerendered**: The hydration hook (installed by `enableHydration()`) registers the element in the static hydration tracker, fires the definition's `elementWillHydrate` callback, swaps `onAttributeChangedCallback` to a no-op so the upgrade-time burst of callbacks is discarded, hydrates the existing DOM via `template.hydrate()`, fires `elementDidHydrate`, then restores the standard handler and removes the element from the tracker. The entire method is wrapped in `try/finally` to guarantee cleanup even if an error occurs during hydration. After this point, all future attribute changes flow through the real handler with zero overhead.
   - **Client-side**: `renderClientSide()` clones the compiled fragment, binds, and appends to the host — the standard path with no prerender logic.
-- **Static hydration tracking**: `ElementController` delegates element-level hydration tracking to a `HydrationTracker` instance (in `hydration-tracker.ts`). `configHydration()` creates the tracker with the provided callbacks. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements, fires per-element callbacks (`hydrationStarted`, `elementWillHydrate`, `elementDidHydrate`), and fires `hydrationComplete` via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first.
+- **Static hydration tracking**: Hydration is opt-in via `enableHydration()` from `@microsoft/fast-element/hydration.js`, which creates a `HydrationTracker` and installs a pluggable hydration hook on `ElementController` via `ElementController.installHydrationHook()`. Until this is called, `renderTemplate()` always uses the client-side path — even if the element has a pre-existing shadow root. `HydrationTracker` manages a `Set<HTMLElement>` of pending elements, fires global callbacks (`hydrationStarted`, `hydrationComplete`), and fires `hydrationComplete` via a debounced `setTimeout(0)` after the last element finishes binding — ensuring all async template batches settle first. Per-element hydration callbacks (`elementWillHydrate`, `elementDidHydrate`) are stored on the `FASTElementDefinition.lifecycleCallbacks` and fired directly by the hydration hook.
 - On `disconnect()`: calls `disconnectedCallback` on behaviors, unbinds the view.
 - `onAttributeChangedCallback()` is the standard handler that processes attribute changes. During the prerendered bind, it is temporarily swapped to a no-op (see above) to avoid redundant processing of server-rendered attribute values.
 - Exposes `addBehavior` / `removeBehavior` for dynamic `HostBehavior` management (used by `ElementStyles`).
@@ -255,7 +247,7 @@ See [src/templating/TEMPLATE-BINDINGS.md](./src/templating/TEMPLATE-BINDINGS.md)
 
 **Exported as**: `Updates`
 
-`Updates` is a shared, batched task queue used to synchronise writes to the DOM. It is stored on the `FAST` global (under `KernelServiceId.updateQueue`) so multiple FAST instances on the same page share a single flush cycle.
+`Updates` is a shared, batched task queue used to synchronise writes to the DOM. It is resolved through standard ES module imports so multiple parts of the application share a single flush cycle.
 
 - `Updates.enqueue(callable)` – schedules a task for the next batch.
 - `Updates.process()` – forces immediate synchronous flush (useful in tests).
@@ -274,7 +266,9 @@ See [ARCHITECTURE_UPDATES.md](./ARCHITECTURE_UPDATES.md) for more detail.
 
 **Files**: `src/styles/css.ts`, `src/styles/element-styles.ts`, `src/styles/css-directive.ts`
 
-The `css` tag (analogous to `html`) builds `ElementStyles` objects. During `ElementController.connect()`, styles are applied to the element's shadow root either via `adoptedStylesheets` (preferred) or an appended `<style>` node, depending on platform support. `CSSDirective`s can contribute additional static CSS during template composition, but runtime CSS bindings and style-attached `HostBehavior`s are not supported. Arbitrary runtime style toggling is handled through `ElementController.addStyles()` / `removeStyles()`; `ElementStyles` itself is a static container.
+**Subpath export**: `@microsoft/fast-element/styles.js`
+
+The `css` tag, `ElementStyles`, `CSSDirective`, `cssDirective`, `ComposableStyles`, `HostBehavior`, `HostController`, `StyleStrategy`, and `StyleTarget` are imported from the `@microsoft/fast-element/styles.js` subpath rather than the main barrel. The `css` tag (analogous to `html`) builds `ElementStyles` objects. During `ElementController.connect()`, styles are applied to the element's shadow root either via `adoptedStylesheets` (preferred) or an appended `<style>` node, depending on platform support. `CSSDirective`s can contribute additional static CSS during template composition, but runtime CSS bindings and style-attached `HostBehavior`s are not supported. Arbitrary runtime style toggling is handled through `ElementController.addStyles()` / `removeStyles()`; `ElementStyles` itself is a static container.
 
 ---
 
@@ -359,7 +353,7 @@ for the detailed architecture.
 
 ```mermaid
 flowchart TD
-    A([Browser loads script]) --> B[FAST global created on globalThis]
+    A([Browser loads script]) --> B[FAST module initialises singleton]
     B --> C[FASTElement subclass executes FASTElement.compose]
     C --> D[Observable decorators register accessors on the prototype]
     C --> E[Attribute decorators push AttributeDefinition to the class]
@@ -378,13 +372,13 @@ flowchart TD
 
     CONN[connectedCallback] --> STAGE[stage = connecting]
     STAGE --> PRERENDER{Existing shadow root\nfrom SSR/DSD?}
-    PRERENDER -->|yes| SETFLAG[isPrerendered = true]
-    PRERENDER -->|no| NORMAL[isPrerendered = false]
+    PRERENDER -->|yes| SETFLAG[isPrerendered = true\nisHydrated = pending]
+    PRERENDER -->|no| NORMAL[isPrerendered = false\nisHydrated = false]
     SETFLAG --> OBS[Restore pre-upgrade observable values]
     NORMAL --> OBS
     OBS --> BEHAV[Connect HostBehaviors]
     BEHAV --> RENDER{isPrerendered AND\ntemplate is hydratable?}
-    RENDER -->|yes| HYDRATE[template.hydrate → HydrationView\nmaps existing DOM to binding targets]
+    RENDER -->|yes| HYDRATE[template.hydrate → HydrationView\nmaps existing DOM to binding targets\nisHydrated = true]
     RENDER -->|no| CLONE[ViewTemplate.render → HTMLView.appendTo shadow root]
     HYDRATE --> STYLES[Apply ElementStyles to shadow root]
     CLONE --> STYLES
@@ -452,10 +446,10 @@ Below is a conceptual map of the major subsystems and their relationships:
 
 ```
 ┌──────────────────────────────────────────────────────────────────────────────┐
-│                           FAST Global (globalThis.FAST)                      │
-│  KernelServiceIds → Updates queue, Observable system, Element registry       │
+│                      FAST (module-scoped singleton)                          │
+│  warn / error / addMessages — diagnostic messaging                           │
 └────────────────────┬─────────────────────────────────────────────────────────┘
-                     │ shared kernel slots
+                     │ ES module imports
          ┌───────────┴───────────┐
          │                       │
 ┌────────▼──────────┐   ┌────────▼────────────────────┐
@@ -498,7 +492,7 @@ Below is a conceptual map of the major subsystems and their relationships:
 1. Developer writes a class extending `FASTElement`, decorates properties with `@observable` / `@attr`, and calls `FASTElement.define({ name, template, styles })`.
 2. `FASTElement.define` → `FASTElementDefinition.compose(...).define()` registers the element with the Custom Element Registry.
 3. When the browser upgrades the element, `ElementController.forCustomElement(element)` is called in the constructor.
-4. On `connectedCallback`, the controller renders the template into the shadow root. If the element already has a shadow root from SSR (prerendered content), `renderPrerendered()` uses `template.hydrate()` to map existing DOM nodes to binding targets instead of cloning new DOM. If no template is available yet, the element connects without rendering until a later `definition.template` update recreates the controller. Compilation is lazy: the first render call triggers `Compiler.compile()`, subsequent calls clone the already-compiled `DocumentFragment`.
+4. On `connectedCallback`, the controller renders the template into the shadow root. If the element already has a shadow root from SSR (prerendered content) and hydration has been enabled via `enableHydration()`, the installed hydration hook uses `template.hydrate()` to map existing DOM nodes to binding targets instead of cloning new DOM. If no template is available yet, the element connects without rendering until a later `definition.template` update recreates the controller. Compilation is lazy: the first render call triggers `Compiler.compile()`, subsequent calls clone the already-compiled `DocumentFragment`.
 5. `HTMLView.bind(source)` wires up each `ViewBehavior`. `oneWay` bindings create `ExpressionNotifier`s that track observable dependencies automatically.
 6. When an observed property changes, its notifier fans out to all subscribers. Each binding enqueues a DOM update via `Updates`. The next animation frame drains the queue and applies the mutations.
 7. On `disconnectedCallback`, `HTMLView.unbind()` tears down all bindings; behaviors disconnect; styles are removed.
@@ -509,8 +503,8 @@ Below is a conceptual map of the major subsystems and their relationships:
 
 ```
 src/
-├── interfaces.ts          # Core types: Callable, Constructable, FASTGlobal, Message codes
-├── platform.ts            # FAST global initialisation, KernelServiceId, TypeRegistry
+├── interfaces.ts          # Core types: Callable, Constructable, Message codes
+├── platform.ts            # FAST module-scoped singleton, TypeRegistry
 ├── declarative.ts         # Pure declarative entrypoint
 ├── dom.ts                 # DOMAspect enum, DOMPolicy, DOMSink
 ├── dom-policy.ts          # Default DOM security policy (TrustedTypes integration)
diff --git a/packages/fast-element/README.md b/packages/fast-element/README.md
index bdc50c26b32..ba6c8fc4d30 100644
--- a/packages/fast-element/README.md
+++ b/packages/fast-element/README.md
@@ -55,10 +55,9 @@ Looking for a quick guide on building components?  Check out [our Cheat Sheet](.
 
 ## Browser Requirements
 
-FAST Element v3 assumes a modern runtime with native `globalThis`. The package
-still installs its `requestIdleCallback` / `cancelIdleCallback` fallback
-internally, but it no longer patches `globalThis` for older engines. If you
-need to support an environment without `globalThis`, load that polyfill before
+FAST Element v3 assumes a modern runtime with native `globalThis`. The `FAST`
+object is now a module-scoped export (not on `globalThis`). If you need to
+support an environment without `globalThis`, load that polyfill before
 importing `@microsoft/fast-element`.
 
 ## Debug entrypoint
@@ -79,6 +78,14 @@ Bundle sizes for each tree-shakeable export are tracked in [`SIZES.md`](./SIZES.
 
 ## Dynamic Style Application
 
+Style APIs (`css`, `ElementStyles`, `CSSDirective`, `cssDirective`,
+`ComposableStyles`, `HostBehavior`, `HostController`, `StyleStrategy`,
+`StyleTarget`) are imported from `@microsoft/fast-element/styles.js`:
+
+```ts
+import { css, ElementStyles } from "@microsoft/fast-element/styles.js";
+```
+
 When runtime state or external signals need to add or remove styles, create the
 `ElementStyles` with `css` and toggle it through
 `this.$fastController.addStyles()` / `this.$fastController.removeStyles()` from
@@ -128,7 +135,24 @@ object and `$c` for the execution context.
 
 ## Prerendered Content Optimization
 
-When a FAST element connects and already has an existing shadow root (from server-side rendering or declarative shadow DOM), `ElementController` automatically detects this. The `isPrerendered` property on the controller is a `Promise<boolean>` that resolves to `true` after prerendered content has been hydrated, or `false` when the component is client-side rendered. This enables several optimizations:
+Hydration of prerendered content is **opt-in**. Call `enableHydration()` from `@microsoft/fast-element/hydration.js` before any FAST elements connect to activate the hydration path:
+
+```typescript
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({
+    hydrationComplete() {
+        console.log("hydration complete");
+    },
+});
+```
+
+When hydration is enabled and a FAST element connects with an existing shadow root (from server-side rendering or declarative shadow DOM), `ElementController` detects this and hydrates instead of re-rendering. Two properties on the controller let you inspect the result:
+
+- **`isPrerendered: Promise<boolean>`** — resolves `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran.
+- **`isHydrated: Promise<boolean>`** — resolves `true` only when hydration actually ran successfully.
+
+This enables several optimizations:
 
 - **Hydration instead of re-render**: The template uses `hydrate()` to map existing DOM nodes to binding targets rather than cloning new DOM.
 - **Declarative template resolution**: `declarativeTemplate()` waits for the
@@ -137,17 +161,37 @@ When a FAST element connects and already has an existing shadow root (from serve
 - **Attribute skip**: `onAttributeChangedCallback()` skips processing during initial upgrade when the element is prerendered, since server-rendered attribute values are already correct.
 - **Binding skip**: `HTMLBindingDirective.bind()` skips `updateTarget` for `attribute` and `booleanAttribute` aspect types when the view is prerendered.
 
-Component authors can await the promise to know when hydration is complete:
+Per-element lifecycle callbacks can be passed directly to `declarativeTemplate()`:
 
 ```typescript
-this.$fastController.isPrerendered.then(prerendered => {
-    if (!prerendered) {
-        this.fetchData();
-    }
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementWillHydrate(source) {
+            console.log(`${source.localName} will hydrate`);
+        },
+        elementDidHydrate(source) {
+            console.log(`${source.localName} hydrated`);
+        },
+    }),
 });
 ```
 
-Custom directives can also await `controller.isPrerendered` (a `Promise<boolean>` on the `ViewController` interface) to determine whether the view's content was prerendered.
+Component authors can await both promises to distinguish prerendered content from successful hydration:
+
+```typescript
+const controller = this.$fastController;
+const prerendered = await controller.isPrerendered;
+const hydrated = await controller.isHydrated;
+
+if (prerendered && !hydrated) {
+    // Had DSD but hydration wasn't enabled — client-side rendered
+}
+```
+
+Custom directives can also await `controller.isPrerendered` and `controller.isHydrated` (both `Promise<boolean>` on the `ViewController` interface) to determine how the view's content was rendered.
 
 ## Define Extensions
 
diff --git a/packages/fast-element/SIZES.md b/packages/fast-element/SIZES.md
index 3b0a3ca61e9..129fd60a7f0 100644
--- a/packages/fast-element/SIZES.md
+++ b/packages/fast-element/SIZES.md
@@ -4,17 +4,22 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 65.46 KB | 19.45 KB | 17.44 KB |
-| FASTElement | 25.69 KB | 7.98 KB | 7.22 KB |
-| Updates | 3.13 KB | 1.28 KB | 1.09 KB |
-| Observable | 7.65 KB | 2.79 KB | 2.51 KB |
-| observable | 7.68 KB | 2.81 KB | 2.53 KB |
-| attr | 1.28 KB | 634 B | 552 B |
-| children | 5.68 KB | 2.19 KB | 1.95 KB |
-| css | 2.36 KB | 1.05 KB | 964 B |
-| ref | 4.65 KB | 1.86 KB | 1.63 KB |
-| slotted | 5.46 KB | 2.12 KB | 1.87 KB |
-| volatile | 7.74 KB | 2.83 KB | 2.54 KB |
-| when | 1.99 KB | 770 B | 625 B |
-| html | 26.82 KB | 8.77 KB | 7.88 KB |
-| repeat | 30.48 KB | 9.70 KB | 8.74 KB |
+| CDN Rollup Bundle | 65.07 KB | 19.35 KB | 17.29 KB |
+| FASTElement | 23.71 KB | 7.37 KB | 6.63 KB |
+| Updates | 473 B | 337 B | 287 B |
+| Observable | 6.70 KB | 2.49 KB | 2.22 KB |
+| observable | 6.74 KB | 2.50 KB | 2.24 KB |
+| attr | 477 B | 288 B | 244 B |
+| children | 4.81 KB | 1.86 KB | 1.64 KB |
+| ref | 3.78 KB | 1.53 KB | 1.33 KB |
+| slotted | 4.60 KB | 1.79 KB | 1.58 KB |
+| volatile | 6.79 KB | 2.53 KB | 2.25 KB |
+| when | 1.82 KB | 712 B | 568 B |
+| html | 25.92 KB | 8.50 KB | 7.61 KB |
+| repeat | 29.57 KB | 9.42 KB | 8.47 KB |
+| css | 2.43 KB | 1.00 KB | 911 B |
+| enableHydration | 43.23 KB | 13.21 KB | 11.88 KB |
+| ArrayObserver | 12.51 KB | 4.45 KB | 4.01 KB |
+| declarativeTemplate | 85.68 KB | 26.22 KB | 23.09 KB |
+| observerMap | 339 B | 209 B | 179 B |
+| attributeMap | 341 B | 209 B | 178 B |
diff --git a/packages/fast-element/api-extractor.arrays.json b/packages/fast-element/api-extractor.arrays.json
new file mode 100644
index 00000000000..06b2b886c16
--- /dev/null
+++ b/packages/fast-element/api-extractor.arrays.json
@@ -0,0 +1,15 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/dts/arrays.d.ts",
+    "dtsRollup": { "enabled": false },
+    "apiReport": {
+        "enabled": true,
+        "reportFolder": "<projectFolder>/docs/arrays",
+        "reportFileName": "api-report"
+    },
+    "docModel": {
+        "enabled": true,
+        "apiJsonFilePath": "<projectFolder>/dist/arrays/arrays.api.json"
+    }
+}
diff --git a/packages/fast-element/api-extractor.context.json b/packages/fast-element/api-extractor.context.json
index b46775509c7..fa40e3cd18f 100644
--- a/packages/fast-element/api-extractor.context.json
+++ b/packages/fast-element/api-extractor.context.json
@@ -2,6 +2,7 @@
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
     "extends": "../../api-extractor.json",
     "mainEntryPointFilePath": "./dist/dts/context.d.ts",
+    "dtsRollup": { "enabled": false },
     "apiReport": {
         "enabled": true,
         "reportFolder": "<projectFolder>/docs/context",
diff --git a/packages/fast-element/api-extractor.declarative.json b/packages/fast-element/api-extractor.declarative.json
index 4d5bfc4cc9d..b6207a31f24 100644
--- a/packages/fast-element/api-extractor.declarative.json
+++ b/packages/fast-element/api-extractor.declarative.json
@@ -2,6 +2,7 @@
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
     "extends": "../../api-extractor.json",
     "mainEntryPointFilePath": "./dist/dts/declarative.d.ts",
+    "dtsRollup": { "enabled": false },
     "apiReport": {
         "enabled": true,
         "reportFolder": "<projectFolder>/docs/declarative",
diff --git a/packages/fast-element/api-extractor.di.json b/packages/fast-element/api-extractor.di.json
index 469e0a96306..a277d3eef1b 100644
--- a/packages/fast-element/api-extractor.di.json
+++ b/packages/fast-element/api-extractor.di.json
@@ -2,6 +2,7 @@
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
     "extends": "../../api-extractor.json",
     "mainEntryPointFilePath": "./dist/dts/di/di.d.ts",
+    "dtsRollup": { "enabled": false },
     "apiReport": {
         "enabled": true,
         "reportFolder": "<projectFolder>/docs/di",
diff --git a/packages/fast-element/api-extractor.hydration.json b/packages/fast-element/api-extractor.hydration.json
new file mode 100644
index 00000000000..8acf896a4fa
--- /dev/null
+++ b/packages/fast-element/api-extractor.hydration.json
@@ -0,0 +1,15 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/dts/hydration.d.ts",
+    "dtsRollup": { "enabled": false },
+    "apiReport": {
+        "enabled": true,
+        "reportFolder": "<projectFolder>/docs/hydration",
+        "reportFileName": "api-report"
+    },
+    "docModel": {
+        "enabled": true,
+        "apiJsonFilePath": "<projectFolder>/dist/hydration/hydration.api.json"
+    }
+}
diff --git a/packages/fast-element/api-extractor.styles.json b/packages/fast-element/api-extractor.styles.json
new file mode 100644
index 00000000000..20dfef63002
--- /dev/null
+++ b/packages/fast-element/api-extractor.styles.json
@@ -0,0 +1,15 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "../../api-extractor.json",
+    "mainEntryPointFilePath": "./dist/dts/styles.d.ts",
+    "dtsRollup": { "enabled": false },
+    "apiReport": {
+        "enabled": true,
+        "reportFolder": "<projectFolder>/docs/styles",
+        "reportFileName": "api-report"
+    },
+    "docModel": {
+        "enabled": true,
+        "apiJsonFilePath": "<projectFolder>/dist/styles/styles.api.json"
+    }
+}
diff --git a/packages/fast-element/docs/api-report.api.md b/packages/fast-element/docs/api-report.api.md
index 19119be7281..4374618ad9a 100644
--- a/packages/fast-element/docs/api-report.api.md
+++ b/packages/fast-element/docs/api-report.api.md
@@ -14,23 +14,6 @@ export interface Accessor {
 // @public
 export type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
 
-// @public
-export interface ArrayObserver extends SubscriberSet {
-    addSort(sort: Sort): void;
-    addSplice(splice: Splice): void;
-    flush(): void;
-    readonly lengthObserver: LengthObserver;
-    reset(oldCollection: any[] | undefined): void;
-    readonly sortObserver: SortObserver;
-    strategy: SpliceStrategy | null;
-}
-
-// @public
-export const ArrayObserver: Readonly<{
-    readonly sorted: 0;
-    readonly enable: () => void;
-}>;
-
 // @public
 export interface Aspected {
     aspectType: DOMAspect;
@@ -179,46 +162,12 @@ export interface ContentView {
     unbind(): void;
 }
 
-// @public
-export const css: CSSTemplateTag;
-
-// @public
-export interface CSSDirective {
-    createCSS(): ComposableStyles;
-}
-
-// @public
-export const CSSDirective: Readonly<{
-    getForInstance: (object: any) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
-    getByType: (key: Function) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
-    define<TType extends Constructable<CSSDirective>>(type: any): TType;
-}>;
-
-// @public
-export function cssDirective(): (type: Constructable<CSSDirective>) => void;
-
-// @public
-export interface CSSDirectiveDefinition<TType extends Constructable<CSSDirective> = Constructable<CSSDirective>> {
-    readonly type: TType;
-}
-
-// @public
-export type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: CSSValue[]) => ElementStyles) & {
-    partial(strings: TemplateStringsArray, ...values: CSSValue[]): CSSDirective;
-};
-
-// @public
-export type CSSValue = ComposableStyles | CSSDirective;
-
 // @public
 export function customElement(nameOrDef: string | PartialFASTElementDefinition): (type: Constructable<HTMLElement>) => void;
 
 // @public
 export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
 
-// @beta
-export const deferHydrationAttribute = "defer-hydration";
-
 // @public
 export interface Disposable {
     dispose(): void;
@@ -256,7 +205,7 @@ export interface DOMPolicy {
 export type DOMSink = (target: Node, aspectName: string, value: any, ...args: any[]) => void;
 
 // @public
-export class ElementController<TElement extends HTMLElement = HTMLElement> extends PropertyChangeNotifier implements HostController<TElement> {
+export class ElementController<TElement extends HTMLElement = HTMLElement> implements Notifier, HostController<TElement> {
     // @internal
     constructor(element: TElement, definition: FASTElementDefinition);
     addBehavior(behavior: HostBehavior<TElement>): void;
@@ -264,7 +213,6 @@ export class ElementController<TElement extends HTMLElement = HTMLElement> exten
     protected behaviors: Map<HostBehavior<TElement>, number> | null;
     protected bindObservables(): void;
     protected captureBoundObservables(): void;
-    static configHydration(callbacks: ElementHydrationCallbacks): void;
     connect(): void;
     protected connectBehaviors(): void;
     get context(): ExecutionContext;
@@ -274,12 +222,16 @@ export class ElementController<TElement extends HTMLElement = HTMLElement> exten
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
     static forCustomElement(element: HTMLElement, override?: boolean): ElementController;
     protected hasExistingShadowRoot: boolean;
+    // @internal
+    static installHydrationHook(hook: (controller: ElementController, template: ElementViewTemplate, element: HTMLElement, host: Node) => boolean): void;
     get isBound(): boolean;
     get isConnected(): boolean;
+    readonly isHydrated: Promise<boolean>;
     readonly isPrerendered: Promise<boolean>;
     get mainStyles(): ElementStyles | null;
     set mainStyles(value: ElementStyles | null);
     protected needsInitialization: boolean;
+    notify(args: any): void;
     protected observeLateAttributes(): void;
     onAttributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     onUnbind(behavior: {
@@ -294,9 +246,12 @@ export class ElementController<TElement extends HTMLElement = HTMLElement> exten
     readonly source: TElement;
     get sourceLifetime(): SourceLifetime | undefined;
     protected stage: Stages;
+    get subject(): TElement;
+    subscribe(subscriber: Subscriber, propertyToWatch?: any): void;
     protected syncLateAttributes(): void;
     get template(): ElementViewTemplate<TElement> | null;
     set template(value: ElementViewTemplate<TElement> | null);
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void;
     readonly view: ElementView<TElement> | null;
 }
 
@@ -306,14 +261,6 @@ export interface ElementControllerStrategy {
     new (element: HTMLElement, definition: FASTElementDefinition): ElementController;
 }
 
-// @public
-export interface ElementHydrationCallbacks {
-    elementDidHydrate?(source: HTMLElement): void;
-    elementWillHydrate?(source: HTMLElement): void;
-    hydrationComplete?(): void;
-    hydrationStarted?(): void;
-}
-
 // @public
 export const elements: (selector?: string) => ElementsFilter;
 
@@ -356,6 +303,9 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
 // @public
 export const emptyArray: readonly never[];
 
+// @public
+export function enableHydration(options?: HydrationOptions): void;
+
 // @public
 export interface ExecutionContext<TParent = any> {
     readonly event: Event;
@@ -406,7 +356,11 @@ export interface ExpressionObserver<TSource = any, TReturn = any, TParent = any>
 }
 
 // @public
-export const FAST: FASTGlobal;
+export const FAST: {
+    warn(_code: number, _values?: Record<string, any>): void;
+    error(code: number, _values?: Record<string, any>): Error;
+    addMessages(messages: Record<number, string>): void;
+};
 
 // @public
 export interface FASTElement extends HTMLElement {
@@ -461,16 +415,6 @@ export const fastElementRegistry: TypeRegistry<FASTElementDefinition>;
 // @public
 export type FASTElementTemplateResolver<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>> = (definition: FASTElementDefinition<TType>) => ElementViewTemplate<InstanceType<TType>> | Promise<ElementViewTemplate<InstanceType<TType>>>;
 
-// @public
-export interface FASTGlobal {
-    addMessages(messages: Record<number, string>): void;
-    error(code: number, values?: Record<string, any>): Error;
-    getById<T>(id: string | number): T | null;
-    // (undocumented)
-    getById<T>(id: string | number, initialize: () => T): T;
-    warn(code: number, values?: Record<string, any>): void;
-}
-
 // @public
 export interface HostBehavior<TSource = any> {
     addedCallback?(controller: HostController<TSource>): void;
@@ -562,6 +506,7 @@ export class HTMLView<TSource = any, TParent = any> extends DefaultExecutionCont
     firstChild: Node;
     insertBefore(node: Node): void;
     isBound: boolean;
+    isHydrated: Promise<boolean>;
     isPrerendered: Promise<boolean>;
     lastChild: Node;
     // (undocumented)
@@ -604,11 +549,17 @@ export class HydrationBindingError extends Error {
     readonly templateString: string;
 }
 
+// @public
+export interface HydrationOptions {
+    hydrationComplete?(): void;
+    hydrationStarted?(): void;
+}
+
 // @public
 export class HydrationTracker {
-    constructor(callbacks: ElementHydrationCallbacks);
+    constructor(options: HydrationOptions);
     add(element: HTMLElement): void;
-    notifyWillHydrate(element: HTMLElement): void;
+    mergeOptions(incoming: HydrationOptions): void;
     remove(element: HTMLElement): void;
 }
 
@@ -639,14 +590,6 @@ export function isHydratable<TSource = any, TParent = any>(template: ElementView
 // @beta (undocumented)
 export function isHydratable(template: ContentTemplate): template is HydratableContentTemplate;
 
-// @public
-export interface LengthObserver extends Subscriber {
-    length: number;
-}
-
-// @public
-export function lengthOf<T>(array: readonly T[]): number;
-
 // @public
 export function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
 
@@ -851,14 +794,6 @@ export class Sort {
     sorted?: number[] | undefined;
 }
 
-// @public
-export function sortedCount<T>(array: readonly T[]): number;
-
-// @public
-export interface SortObserver extends Subscriber {
-    sorted: number;
-}
-
 // @public
 export const SourceLifetime: Readonly<{
     readonly unknown: undefined;
@@ -881,35 +816,6 @@ export class Splice {
     reset?: boolean;
 }
 
-// @public
-export interface SpliceStrategy {
-    normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): readonly Splice[];
-    pop(array: any[], observer: ArrayObserver, pop: typeof Array.prototype.pop, args: any[]): any;
-    push(array: any[], observer: ArrayObserver, push: typeof Array.prototype.push, args: any[]): any;
-    reverse(array: any[], observer: ArrayObserver, reverse: typeof Array.prototype.reverse, args: any[]): any;
-    shift(array: any[], observer: ArrayObserver, shift: typeof Array.prototype.shift, args: any[]): any;
-    sort(array: any[], observer: ArrayObserver, sort: typeof Array.prototype.sort, args: any[]): any[];
-    splice(array: any[], observer: ArrayObserver, splice: typeof Array.prototype.splice, args: any[]): any;
-    readonly support: SpliceStrategySupport;
-    unshift(array: any[], observer: ArrayObserver, unshift: typeof Array.prototype.unshift, args: any[]): any[];
-}
-
-// @public
-export const SpliceStrategy: Readonly<{
-    readonly reset: Splice[];
-    readonly setDefaultStrategy: (strategy: SpliceStrategy) => void;
-}>;
-
-// @public
-export const SpliceStrategySupport: Readonly<{
-    readonly reset: 1;
-    readonly splice: 2;
-    readonly optimized: 3;
-}>;
-
-// @public
-export type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
-
 // @public
 export const enum Stages {
     connected = 1,
@@ -980,7 +886,11 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
 // @public
 export interface TemplateLifecycleCallbacks {
     elementDidDefine?(name: string): void;
+    elementDidHydrate?(source: HTMLElement): void;
+    elementDidRegister?(name: string): void;
+    elementWillHydrate?(source: HTMLElement): void;
     templateDidUpdate?(name: string): void;
+    templateWillUpdate?(name: string): void;
 }
 
 // @public
@@ -1051,6 +961,7 @@ export type ViewBehaviorTargets = {
 
 // @public
 export interface ViewController<TSource = any, TParent = any> extends ExpressionController<TSource, TParent> {
+    readonly isHydrated?: Promise<boolean>;
     readonly isPrerendered?: Promise<boolean>;
     // @internal
     readonly _skipAttrUpdates?: boolean;
diff --git a/packages/fast-element/docs/arrays/api-report.api.md b/packages/fast-element/docs/arrays/api-report.api.md
new file mode 100644
index 00000000000..4a3f400e9e3
--- /dev/null
+++ b/packages/fast-element/docs/arrays/api-report.api.md
@@ -0,0 +1,114 @@
+## API Report File for "@microsoft/fast-element"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @public
+export interface ArrayObserver extends SubscriberSet {
+    addSort(sort: Sort): void;
+    addSplice(splice: Splice): void;
+    flush(): void;
+    readonly lengthObserver: LengthObserver;
+    reset(oldCollection: any[] | undefined): void;
+    readonly sortObserver: SortObserver;
+    strategy: SpliceStrategy | null;
+}
+
+// @public
+export const ArrayObserver: Readonly<{
+    readonly sorted: 0;
+    readonly enable: () => void;
+}>;
+
+// @public
+export interface LengthObserver extends Subscriber {
+    length: number;
+}
+
+// @public
+export function lengthOf<T>(array: readonly T[]): number;
+
+// @public
+export interface Notifier {
+    notify(args: any): void;
+    readonly subject: any;
+    subscribe(subscriber: Subscriber, propertyToWatch?: any): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void;
+}
+
+// @public
+export class Sort {
+    constructor(sorted?: number[] | undefined);
+    // (undocumented)
+    sorted?: number[] | undefined;
+}
+
+// @public
+export function sortedCount<T>(array: readonly T[]): number;
+
+// @public
+export interface SortObserver extends Subscriber {
+    sorted: number;
+}
+
+// @public
+export class Splice {
+    constructor(index: number, removed: any[], addedCount: number);
+    // (undocumented)
+    addedCount: number;
+    adjustTo(array: any[]): this;
+    // (undocumented)
+    index: number;
+    // (undocumented)
+    removed: any[];
+    reset?: boolean;
+}
+
+// @public
+export interface SpliceStrategy {
+    normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): readonly Splice[];
+    pop(array: any[], observer: ArrayObserver, pop: typeof Array.prototype.pop, args: any[]): any;
+    push(array: any[], observer: ArrayObserver, push: typeof Array.prototype.push, args: any[]): any;
+    reverse(array: any[], observer: ArrayObserver, reverse: typeof Array.prototype.reverse, args: any[]): any;
+    shift(array: any[], observer: ArrayObserver, shift: typeof Array.prototype.shift, args: any[]): any;
+    sort(array: any[], observer: ArrayObserver, sort: typeof Array.prototype.sort, args: any[]): any[];
+    splice(array: any[], observer: ArrayObserver, splice: typeof Array.prototype.splice, args: any[]): any;
+    readonly support: SpliceStrategySupport;
+    unshift(array: any[], observer: ArrayObserver, unshift: typeof Array.prototype.unshift, args: any[]): any[];
+}
+
+// @public
+export const SpliceStrategy: Readonly<{
+    readonly reset: Splice[];
+    readonly setDefaultStrategy: (strategy: SpliceStrategy) => void;
+}>;
+
+// @public
+export const SpliceStrategySupport: Readonly<{
+    readonly reset: 1;
+    readonly splice: 2;
+    readonly optimized: 3;
+}>;
+
+// @public
+export type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
+
+// @public
+export interface Subscriber {
+    handleChange(subject: any, args: any): void;
+}
+
+// @public
+export class SubscriberSet implements Notifier {
+    constructor(subject: any, initialSubscriber?: Subscriber);
+    has(subscriber: Subscriber): boolean;
+    notify(args: any): void;
+    readonly subject: any;
+    subscribe(subscriber: Subscriber): void;
+    unsubscribe(subscriber: Subscriber): void;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/fast-element/docs/declarative/api-report.api.md b/packages/fast-element/docs/declarative/api-report.api.md
index 237e8c65066..4ad2346bc11 100644
--- a/packages/fast-element/docs/declarative/api-report.api.md
+++ b/packages/fast-element/docs/declarative/api-report.api.md
@@ -23,10 +23,11 @@ export interface AttributeMapConfig {
 // @public (undocumented)
 export type CachedPathMap = Map<string, Map<string, JSONSchema>>;
 
+// Warning: (ae-forgotten-export) The symbol "TemplateLifecycleCallbacks" needs to be exported by the entry point declarative.d.ts
 // Warning: (ae-forgotten-export) The symbol "FASTElementTemplateResolver" needs to be exported by the entry point declarative.d.ts
 //
 // @public
-export function declarativeTemplate(): FASTElementTemplateResolver;
+export function declarativeTemplate(callbacks?: TemplateLifecycleCallbacks): FASTElementTemplateResolver;
 
 // @public
 export interface ElementOptions {
@@ -45,16 +46,10 @@ export interface ElementOptionsDictionary<ElementOptionsType = ElementOptions> {
 // @public
 export type FASTElementExtension = (definition: FASTElementDefinition) => void;
 
-// Warning: (ae-forgotten-export) The symbol "TemplateLifecycleCallbacks" needs to be exported by the entry point declarative.d.ts
-//
-// @public
+// @public @deprecated
 export interface HydrationLifecycleCallbacks extends TemplateLifecycleCallbacks {
-    elementDidHydrate?(source: HTMLElement): void;
-    elementDidRegister?(name: string): void;
-    elementWillHydrate?(source: HTMLElement): void;
     hydrationComplete?(): void;
     hydrationStarted?(): void;
-    templateWillUpdate?(name: string): void;
 }
 
 // Warning: (ae-forgotten-export) The symbol "JSONSchemaCommon" needs to be exported by the entry point declarative.d.ts
@@ -125,6 +120,7 @@ export const schemaRegistry: CachedPathMap;
 // @public
 export class TemplateElement extends FASTElement implements TemplatePublisher {
     constructor();
+    // @deprecated
     static config(callbacks: HydrationLifecycleCallbacks): typeof TemplateElement;
     // (undocumented)
     connectedCallback(): void;
diff --git a/packages/fast-element/docs/hydration/api-report.api.md b/packages/fast-element/docs/hydration/api-report.api.md
new file mode 100644
index 00000000000..b808debe1f0
--- /dev/null
+++ b/packages/fast-element/docs/hydration/api-report.api.md
@@ -0,0 +1,21 @@
+## API Report File for "@microsoft/fast-element"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @beta
+export const deferHydrationAttribute = "defer-hydration";
+
+// @public
+export function enableHydration(options?: HydrationOptions): void;
+
+// @public
+export interface HydrationOptions {
+    hydrationComplete?(): void;
+    hydrationStarted?(): void;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/fast-element/docs/styles/api-report.api.md b/packages/fast-element/docs/styles/api-report.api.md
new file mode 100644
index 00000000000..7e26cf3355a
--- /dev/null
+++ b/packages/fast-element/docs/styles/api-report.api.md
@@ -0,0 +1,146 @@
+## API Report File for "@microsoft/fast-element"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// @public
+export type ComposableStyles = string | ElementStyles | CSSStyleSheet;
+
+// @public
+export type Constructable<T = {}> = {
+    new (...args: any[]): T;
+};
+
+// @public
+export type ConstructibleStyleStrategy = {
+    new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
+};
+
+// @public
+export const css: CSSTemplateTag;
+
+// @public
+export interface CSSDirective {
+    createCSS(): ComposableStyles;
+}
+
+// @public
+export const CSSDirective: Readonly<{
+    getForInstance: (object: any) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    getByType: (key: Function) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
+    define<TType extends Constructable<CSSDirective>>(type: any): TType;
+}>;
+
+// @public
+export function cssDirective(): (type: Constructable<CSSDirective>) => void;
+
+// @public
+export interface CSSDirectiveDefinition<TType extends Constructable<CSSDirective> = Constructable<CSSDirective>> {
+    readonly type: TType;
+}
+
+// @public
+export type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: CSSValue[]) => ElementStyles) & {
+    partial(strings: TemplateStringsArray, ...values: CSSValue[]): CSSDirective;
+};
+
+// @public
+export type CSSValue = ComposableStyles | CSSDirective;
+
+// @public
+export class ElementStyles {
+    constructor(styles: ReadonlyArray<ComposableStyles>);
+    // @internal (undocumented)
+    addStylesTo(target: StyleTarget): void;
+    // @internal (undocumented)
+    isAttachedTo(target: StyleTarget): boolean;
+    static normalize(styles: ComposableStyles | ComposableStyles[] | undefined): ElementStyles | undefined;
+    // @internal (undocumented)
+    removeStylesFrom(target: StyleTarget): void;
+    static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void;
+    get strategy(): StyleStrategy;
+    // (undocumented)
+    readonly styles: ReadonlyArray<ComposableStyles>;
+    static readonly supportsAdoptedStyleSheets: boolean;
+    withStrategy(Strategy: ConstructibleStyleStrategy): this;
+}
+
+// @public
+export interface ExecutionContext<TParent = any> {
+    readonly event: Event;
+    eventDetail<TDetail>(): TDetail;
+    eventTarget<TTarget extends EventTarget>(): TTarget;
+    index: number;
+    readonly isEven: boolean;
+    readonly isFirst: boolean;
+    readonly isInMiddle: boolean;
+    readonly isLast: boolean;
+    readonly isOdd: boolean;
+    length: number;
+    parent: TParent;
+    parentContext: ExecutionContext<TParent>;
+}
+
+// @public
+export const ExecutionContext: Readonly<{
+    default: ExecutionContext<any>;
+    getEvent(): Event | null;
+    setEvent(event: Event | null): void;
+}>;
+
+// @public
+export interface ExpressionController<TSource = any, TParent = any> {
+    readonly context: ExecutionContext<TParent>;
+    readonly isBound: boolean;
+    onUnbind(behavior: {
+        unbind(controller: ExpressionController<TSource, TParent>): any;
+    }): void;
+    readonly source: TSource;
+    readonly sourceLifetime?: SourceLifetime;
+}
+
+// @public
+export interface HostBehavior<TSource = any> {
+    addedCallback?(controller: HostController<TSource>): void;
+    connectedCallback?(controller: HostController<TSource>): void;
+    disconnectedCallback?(controller: HostController<TSource>): void;
+    removedCallback?(controller: HostController<TSource>): void;
+}
+
+// @public
+export interface HostController<TSource = any> extends ExpressionController<TSource> {
+    addBehavior(behavior: HostBehavior<TSource>): void;
+    addStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
+    readonly isConnected: boolean;
+    mainStyles: ElementStyles | null;
+    removeBehavior(behavior: HostBehavior<TSource>, force?: boolean): void;
+    removeStyles(styles: ElementStyles | HTMLStyleElement | null | undefined): void;
+}
+
+// @public
+export const SourceLifetime: Readonly<{
+    readonly unknown: undefined;
+    readonly coupled: 1;
+}>;
+
+// @public
+export type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
+
+// @public
+export interface StyleStrategy {
+    addStylesTo(target: StyleTarget): void;
+    removeStylesFrom(target: StyleTarget): void;
+}
+
+// @public
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
+    adoptedStyleSheets?: CSSStyleSheet[];
+    append(styles: HTMLStyleElement): void;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    removeChild(styles: HTMLStyleElement): void;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/fast-element/package.json b/packages/fast-element/package.json
index 6a0110a8c5f..28b822659ab 100644
--- a/packages/fast-element/package.json
+++ b/packages/fast-element/package.json
@@ -40,6 +40,11 @@
       "test": "./src/declarative/utilities.ts",
       "default": "./dist/esm/declarative/utilities.js"
     },
+    "./hydration.js": {
+      "types": "./dist/dts/hydration.d.ts",
+      "test": "./src/hydration.ts",
+      "default": "./dist/esm/hydration.js"
+    },
     "./binding/two-way.js": {
       "types": "./dist/dts/binding/two-way.d.ts",
       "default": "./dist/esm/binding/two-way.js"
@@ -72,10 +77,20 @@
       "types": "./dist/dts/dom-policy.d.ts",
       "default": "./dist/esm/dom-policy.js"
     },
+    "./arrays.js": {
+      "types": "./dist/dts/arrays.d.ts",
+      "test": "./src/arrays.ts",
+      "default": "./dist/esm/arrays.js"
+    },
     "./observable.js": {
       "types": "./dist/dts/observation/observable.d.ts",
       "default": "./dist/esm/observation/observable.js"
     },
+    "./styles.js": {
+      "types": "./dist/dts/styles.d.ts",
+      "test": "./src/styles.ts",
+      "default": "./dist/esm/styles.js"
+    },
     "./package.json": "./package.json"
   },
   "unpkg": "dist/fast-element.min.js",
diff --git a/packages/fast-element/scripts/measure-sizes.js b/packages/fast-element/scripts/measure-sizes.js
index df0147675cd..53eeb133221 100644
--- a/packages/fast-element/scripts/measure-sizes.js
+++ b/packages/fast-element/scripts/measure-sizes.js
@@ -15,7 +15,6 @@ const namedExports = [
     "observable",
     "attr",
     "children",
-    "css",
     "ref",
     "slotted",
     "volatile",
@@ -24,6 +23,15 @@ const namedExports = [
     "repeat",
 ];
 
+const subpathExports = [
+    { name: "css", path: "@microsoft/fast-element/styles.js", export: "css" },
+    { name: "enableHydration", path: "@microsoft/fast-element/hydration.js", export: "enableHydration" },
+    { name: "ArrayObserver", path: "@microsoft/fast-element/arrays.js", export: "ArrayObserver" },
+    { name: "declarativeTemplate", path: "@microsoft/fast-element/declarative.js", export: "declarativeTemplate" },
+    { name: "observerMap", path: "@microsoft/fast-element/declarative.js", export: "observerMap" },
+    { name: "attributeMap", path: "@microsoft/fast-element/declarative.js", export: "attributeMap" },
+];
+
 function formatBytes(bytes) {
     if (bytes < 1024) return `${bytes} B`;
     return `${(bytes / 1024).toFixed(2)} KB`;
@@ -39,8 +47,8 @@ function measureBuffer(buffer) {
     };
 }
 
-async function measureExport(exportName) {
-    const contents = `import { ${exportName} } from "@microsoft/fast-element";\nexport { ${exportName} };\n`;
+async function measureExport(exportName, importPath = "@microsoft/fast-element") {
+    const contents = `import { ${exportName} } from "${importPath}";\nexport { ${exportName} };\n`;
 
     const result = await build({
         stdin: {
@@ -81,6 +89,15 @@ async function main() {
     );
     results.push(...exportResults);
 
+    // Measure subpath exports in parallel
+    const subpathResults = await Promise.all(
+        subpathExports.map(async ({ name, path: importPath, export: exportName }) => {
+            const sizes = await measureExport(exportName, importPath);
+            return { name, ...sizes };
+        }),
+    );
+    results.push(...subpathResults);
+
     // Generate markdown table
     const lines = [
         "# Export Sizes",
diff --git a/packages/fast-element/scripts/run-api-extractor.js b/packages/fast-element/scripts/run-api-extractor.js
index 9f89bfd78da..3a1004b8fa2 100644
--- a/packages/fast-element/scripts/run-api-extractor.js
+++ b/packages/fast-element/scripts/run-api-extractor.js
@@ -22,6 +22,21 @@ export const exportPaths = [
         docsFolder: "di",
         configPath: path.resolve(__dirname, "../api-extractor.di.json"),
     },
+    {
+        path: "./hydration.js",
+        docsFolder: "hydration",
+        configPath: path.resolve(__dirname, "../api-extractor.hydration.json"),
+    },
+    {
+        path: "./styles.js",
+        docsFolder: "styles",
+        configPath: path.resolve(__dirname, "../api-extractor.styles.json"),
+    },
+    {
+        path: "./arrays.js",
+        docsFolder: "arrays",
+        configPath: path.resolve(__dirname, "../api-extractor.arrays.json"),
+    },
 ];
 
 (function () {
diff --git a/packages/fast-element/src/arrays.ts b/packages/fast-element/src/arrays.ts
new file mode 100644
index 00000000000..dbc36a105c4
--- /dev/null
+++ b/packages/fast-element/src/arrays.ts
@@ -0,0 +1,12 @@
+export {
+    ArrayObserver,
+    type LengthObserver,
+    lengthOf,
+    Sort,
+    type SortObserver,
+    Splice,
+    SpliceStrategy,
+    SpliceStrategySupport,
+    sortedCount,
+} from "./observation/arrays.js";
+export type { Notifier, Subscriber, SubscriberSet } from "./observation/notifier.js";
diff --git a/packages/fast-element/src/binding/binding.ts b/packages/fast-element/src/binding/binding.ts
index 38e8e6188bf..6c02df40652 100644
--- a/packages/fast-element/src/binding/binding.ts
+++ b/packages/fast-element/src/binding/binding.ts
@@ -44,7 +44,7 @@ export abstract class Binding<TSource = any, TReturn = any, TParent = any> {
     public constructor(
         public evaluate: Expression<TSource, TReturn, TParent>,
         public policy?: DOMPolicy,
-        public isVolatile: boolean = false
+        public isVolatile: boolean = false,
     ) {}
 
     /**
@@ -54,6 +54,6 @@ export abstract class Binding<TSource = any, TReturn = any, TParent = any> {
      */
     abstract createObserver(
         subscriber: Subscriber,
-        directive: BindingDirective
+        directive: BindingDirective,
     ): ExpressionObserver<TSource, TReturn, TParent>;
 }
diff --git a/packages/fast-element/src/binding/normalize.ts b/packages/fast-element/src/binding/normalize.ts
index e44ff32eef3..03d7ec33008 100644
--- a/packages/fast-element/src/binding/normalize.ts
+++ b/packages/fast-element/src/binding/normalize.ts
@@ -1,8 +1,8 @@
 import { isFunction } from "../interfaces.js";
 import type { Expression } from "../observation/observable.js";
 import { Binding } from "./binding.js";
-import { oneWay } from "./one-way.js";
 import { oneTime } from "./one-time.js";
+import { oneWay } from "./one-way.js";
 
 /**
  * Normalizes the input value into a binding.
@@ -11,11 +11,14 @@ import { oneTime } from "./one-time.js";
  * @public
  */
 export function normalizeBinding<TSource = any, TReturn = any, TParent = any>(
-    value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}
+    value:
+        | Expression<TSource, TReturn, TParent>
+        | Binding<TSource, TReturn, TParent>
+        | {},
 ): Binding<TSource, TReturn, TParent> {
     return isFunction(value)
         ? oneWay(value as Expression<TSource, TReturn, TParent>)
         : value instanceof Binding
-        ? value
-        : oneTime(() => value);
+          ? value
+          : oneTime(() => value);
 }
diff --git a/packages/fast-element/src/binding/one-time.ts b/packages/fast-element/src/binding/one-time.ts
index b06d2137fe8..a8a5f344095 100644
--- a/packages/fast-element/src/binding/one-time.ts
+++ b/packages/fast-element/src/binding/one-time.ts
@@ -31,7 +31,7 @@ makeSerializationNoop(OneTimeBinding);
  */
 export function oneTime<T = any>(
     expression: Expression<T>,
-    policy?: DOMPolicy
+    policy?: DOMPolicy,
 ): Binding<T> {
     return new OneTimeBinding(expression, policy);
 }
diff --git a/packages/fast-element/src/binding/one-way.ts b/packages/fast-element/src/binding/one-way.ts
index ecd2e1a0b72..b5faf3d2547 100644
--- a/packages/fast-element/src/binding/one-way.ts
+++ b/packages/fast-element/src/binding/one-way.ts
@@ -13,7 +13,7 @@ class OneWayBinding<TSource = any, TReturn = any, TParent = any> extends Binding
     TParent
 > {
     createObserver(
-        subscriber: Subscriber
+        subscriber: Subscriber,
     ): ExpressionObserver<TSource, TReturn, TParent> {
         return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
@@ -30,7 +30,7 @@ class OneWayBinding<TSource = any, TReturn = any, TParent = any> extends Binding
 export function oneWay<T = any>(
     expression: Expression<T>,
     policy?: DOMPolicy,
-    isVolatile = Observable.isVolatileBinding(expression)
+    isVolatile = Observable.isVolatileBinding(expression),
 ): Binding<T> {
     return new OneWayBinding(expression, policy, isVolatile);
 }
@@ -44,7 +44,7 @@ export function oneWay<T = any>(
  */
 export function listener<T = any>(
     expression: Expression<T>,
-    options?: AddEventListenerOptions
+    options?: AddEventListenerOptions,
 ): Binding<T> {
     const config = new OneWayBinding(expression);
     config.options = options;
diff --git a/packages/fast-element/src/binding/signal.ts b/packages/fast-element/src/binding/signal.ts
index 2ec650a1b53..f39dac0b0f3 100644
--- a/packages/fast-element/src/binding/signal.ts
+++ b/packages/fast-element/src/binding/signal.ts
@@ -1,11 +1,11 @@
+import type { DOMPolicy } from "../dom.js";
+import { isString } from "../interfaces.js";
+import type { Subscriber } from "../observation/notifier.js";
 import type {
     Expression,
     ExpressionController,
     ExpressionObserver,
 } from "../observation/observable.js";
-import { isString } from "../interfaces.js";
-import type { Subscriber } from "../observation/notifier.js";
-import type { DOMPolicy } from "../dom.js";
 import { makeSerializationNoop } from "../platform.js";
 import { Binding } from "./binding.js";
 
@@ -68,7 +68,7 @@ class SignalObserver<TSource = any, TReturn = any, TParent = any> implements Sub
 
     constructor(
         private readonly dataBinding: SignalBinding,
-        private readonly subscriber: Subscriber
+        private readonly subscriber: Subscriber,
     ) {}
 
     bind(controller: ExpressionController<TSource, TParent>): TReturn {
@@ -106,7 +106,7 @@ class SignalBinding<TSource = any, TReturn = any, TParent = any> extends Binding
     TParent
 > {
     createObserver(
-        subscriber: Subscriber
+        subscriber: Subscriber,
     ): ExpressionObserver<TSource, TReturn, TParent> {
         return new SignalObserver(this, subscriber);
     }
@@ -123,7 +123,7 @@ class SignalBinding<TSource = any, TReturn = any, TParent = any> extends Binding
 export function signal<T = any>(
     expression: Expression<T>,
     options: string | Expression<T>,
-    policy?: DOMPolicy
+    policy?: DOMPolicy,
 ): Binding<T> {
     const binding = new SignalBinding(expression, policy);
     binding.options = options;
diff --git a/packages/fast-element/src/binding/two-way.ts b/packages/fast-element/src/binding/two-way.ts
index 0da947ba49c..305aaaccaa6 100644
--- a/packages/fast-element/src/binding/two-way.ts
+++ b/packages/fast-element/src/binding/two-way.ts
@@ -2,7 +2,7 @@ import type { DOMPolicy } from "../dom.js";
 import { isString, Message } from "../interfaces.js";
 import type { Subscriber } from "../observation/notifier.js";
 import {
-    ExecutionContext,
+    type ExecutionContext,
     type Expression,
     type ExpressionController,
     type ExpressionObserver,
@@ -71,12 +71,12 @@ class TwoWayObserver<TSource = any, TReturn = any, TParent = any>
     constructor(
         private directive: BindingDirective,
         private subscriber: Subscriber,
-        private dataBinding: TwoWayBinding
+        private dataBinding: TwoWayBinding,
     ) {
         this.notifier = Observable.binding(
             dataBinding.evaluate,
             this,
-            dataBinding.isVolatile
+            dataBinding.isVolatile,
         );
     }
 
@@ -147,7 +147,7 @@ class TwoWayBinding<TSource = any, TReturn = any, TParent = any> extends Binding
 > {
     createObserver(
         subscriber: Subscriber,
-        bindingSource: BindingDirective
+        bindingSource: BindingDirective,
     ): ExpressionObserver<TSource, TReturn, TParent> {
         return new TwoWayObserver(bindingSource, subscriber, this);
     }
@@ -166,7 +166,7 @@ export function twoWay<T = any>(
     expression: Expression<T>,
     optionsOrChangeEvent?: TwoWayBindingOptions | string,
     policy?: DOMPolicy,
-    isBindingVolatile = Observable.isVolatileBinding(expression)
+    isBindingVolatile = Observable.isVolatileBinding(expression),
 ): Binding<T> {
     if (isString(optionsOrChangeEvent)) {
         optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
diff --git a/packages/fast-element/src/components/attributes.ts b/packages/fast-element/src/components/attributes.ts
index 50295481e13..16dc0161cc7 100644
--- a/packages/fast-element/src/components/attributes.ts
+++ b/packages/fast-element/src/components/attributes.ts
@@ -1,8 +1,8 @@
-import { type Accessor, Observable } from "../observation/observable.js";
-import type { Notifier } from "../observation/notifier.js";
+import { DOM } from "../dom.js";
 import { isString } from "../interfaces.js";
+import type { Notifier } from "../observation/notifier.js";
+import { type Accessor, Observable } from "../observation/observable.js";
 import { Updates } from "../observation/update-queue.js";
-import { DOM } from "../dom.js";
 import { createMetadataLocator } from "../platform.js";
 
 /**
@@ -183,7 +183,7 @@ export class AttributeDefinition implements Accessor {
         name: string,
         attribute: string = name.toLowerCase(),
         mode: AttributeMode = reflectMode,
-        converter?: ValueConverter
+        converter?: ValueConverter,
     ) {
         this.Owner = Owner;
         this.name = name;
@@ -259,14 +259,17 @@ export class AttributeDefinition implements Accessor {
             const latestValue = element[this.fieldName];
 
             switch (mode) {
-                case reflectMode:
+                case reflectMode: {
                     const converter = this.converter;
                     DOM.setAttribute(
                         element,
                         this.attribute,
-                        converter !== void 0 ? converter.toView(latestValue) : latestValue
+                        converter !== void 0
+                            ? converter.toView(latestValue)
+                            : latestValue,
                     );
                     break;
+                }
                 case booleanMode:
                     DOM.setBooleanAttribute(element, this.attribute, latestValue);
                     break;
@@ -309,8 +312,8 @@ export class AttributeDefinition implements Accessor {
                             config.property,
                             config.attribute,
                             config.mode,
-                            config.converter
-                        )
+                            config.converter,
+                        ),
                     );
                 }
             }
@@ -326,7 +329,7 @@ export class AttributeDefinition implements Accessor {
  * @public
  */
 export function attr(
-    config?: DecoratorAttributeConfiguration
+    config?: DecoratorAttributeConfiguration,
 ): (target: {}, property: string) => void;
 
 /**
@@ -338,7 +341,7 @@ export function attr(
 export function attr(target: {}, prop: string): void;
 export function attr(
     configOrTarget?: DecoratorAttributeConfiguration | {},
-    prop?: string
+    prop?: string,
 ): void | ((target: {}, property: string) => void) {
     let config: AttributeConfiguration;
 
diff --git a/packages/fast-element/src/components/element-controller.ts b/packages/fast-element/src/components/element-controller.ts
index 2332bd97e55..1885ae24098 100644
--- a/packages/fast-element/src/components/element-controller.ts
+++ b/packages/fast-element/src/components/element-controller.ts
@@ -1,4 +1,5 @@
 import { Message, type Mutable } from "../interfaces.js";
+import type { Notifier, Subscriber } from "../observation/notifier.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import {
     ExecutionContext,
@@ -11,10 +12,7 @@ import { ElementStyles } from "../styles/element-styles.js";
 import type { HostBehavior, HostController } from "../styles/host.js";
 import type { StyleStrategy, StyleTarget } from "../styles/style-strategy.js";
 import type { ViewController } from "../templating/html-directive.js";
-import type {
-    ElementViewTemplate,
-    HydratableElementViewTemplate,
-} from "../templating/template.js";
+import type { ElementViewTemplate } from "../templating/template.js";
 import type { ElementView } from "../templating/view.js";
 import {
     FASTElementDefinition,
@@ -22,14 +20,6 @@ import {
     type ShadowRootOptions,
 } from "./fast-definitions.js";
 import type { FASTElement } from "./fast-element.js";
-import { isHydratable } from "./hydration.js";
-import { type ElementHydrationCallbacks, HydrationTracker } from "./hydration-tracker.js";
-
-/**
- * No-op handler used during prerendered bind to discard the
- * upgrade-time burst of attributeChangedCallbacks.
- */
-function noopAttributeHandler() {}
 
 const defaultEventOptions: CustomEventInit = {
     bubbles: true,
@@ -76,9 +66,13 @@ export const enum Stages {
  * @public
  */
 export class ElementController<TElement extends HTMLElement = HTMLElement>
-    extends PropertyChangeNotifier
-    implements HostController<TElement>
+    implements Notifier, HostController<TElement>
 {
+    /**
+     * Internal notifier used to delegate subscriber management.
+     */
+    private _notifier!: PropertyChangeNotifier;
+
     /**
      * A map of observable properties that were set on the element before upgrade.
      */
@@ -100,26 +94,28 @@ export class ElementController<TElement extends HTMLElement = HTMLElement>
     private _resolvePrerendered!: (value: boolean) => void;
 
     /**
-     * A promise that resolves with `true` after prerendered content has
-     * been hydrated, or `false` immediately when the component is
-     * client-side rendered. Component authors can await this to know
-     * when the element is fully interactive:
-     *
-     * ```typescript
-     * connectedCallback() {
-     *     super.connectedCallback();
-     *     this.$fastController.isPrerendered.then(prerendered => {
-     *         if (!prerendered) {
-     *             this.fetchData();
-     *         }
-     *     });
-     * }
-     * ```
+     * Resolves the isHydrated promise.
+     */
+    private _resolveHydrated!: (value: boolean) => void;
+
+    /**
+     * Resolves `true` when the element had an existing shadow root
+     * (from SSR or declarative shadow DOM) at connect time, `false`
+     * otherwise.
      */
     public readonly isPrerendered: Promise<boolean> = new Promise<boolean>(resolve => {
         this._resolvePrerendered = resolve;
     });
 
+    /**
+     * Resolves `true` after prerendered content has been successfully
+     * hydrated, or `false` when the component is client-side rendered
+     * or hydration is not enabled.
+     */
+    public readonly isHydrated: Promise<boolean> = new Promise<boolean>(resolve => {
+        this._resolveHydrated = resolve;
+    });
+
     /**
      * The template used to render the component.
      */
@@ -324,7 +320,7 @@ export class ElementController<TElement extends HTMLElement = HTMLElement>
      * @internal
      */
     public constructor(element: TElement, definition: FASTElementDefinition) {
-        super(element);
+        this._notifier = new PropertyChangeNotifier(element);
 
         this.source = element;
         this.definition = definition;
@@ -356,6 +352,39 @@ export class ElementController<TElement extends HTMLElement = HTMLElement>
         this.captureBoundObservables();
     }
 
+    /**
+     * The subject that subscribers will receive notifications for.
+     */
+    public get subject(): TElement {
+        return this._notifier.subject;
+    }
+
+    /**
+     * Notifies all subscribers of a property change.
+     * @param args - The property name that changed.
+     */
+    public notify(args: any): void {
+        this._notifier.notify(args);
+    }
+
+    /**
+     * Subscribes to notification of changes in the element's state.
+     * @param subscriber - The object that is subscribing for change notification.
+     * @param propertyToWatch - The name of the property to watch for changes.
+     */
+    public subscribe(subscriber: Subscriber, propertyToWatch?: any): void {
+        this._notifier.subscribe(subscriber, propertyToWatch);
+    }
+
+    /**
+     * Unsubscribes from notification of changes in the element's state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     * @param propertyToUnwatch - The name of the property to unsubscribe from.
+     */
+    public unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void {
+        this._notifier.unsubscribe(subscriber, propertyToUnwatch);
+    }
+
     /**
      * Registers an unbind handler with the controller.
      * @param behavior - An object to call when the controller unbinds.
@@ -761,64 +790,31 @@ export class ElementController<TElement extends HTMLElement = HTMLElement>
         }
 
         if (template) {
-            const isPrerendered = this.hasExistingShadowRoot && this.needsInitialization;
+            const hasPrerenderedContent =
+                this.hasExistingShadowRoot && this.needsInitialization;
+            let didHydrate = false;
+
+            if (hasPrerenderedContent && ElementController.hydrationHook) {
+                didHydrate = ElementController.hydrationHook(
+                    this,
+                    template,
+                    element,
+                    host,
+                );
+            }
 
-            if (isPrerendered && isHydratable(template)) {
-                this.renderPrerendered(template, element, host);
-            } else {
+            if (!didHydrate) {
                 this.renderClientSide(template, element, host);
             }
 
-            this._resolvePrerendered(isPrerendered);
+            this._resolvePrerendered(hasPrerenderedContent);
+            this._resolveHydrated(didHydrate);
         } else if (this.needsInitialization) {
             this._resolvePrerendered(false);
+            this._resolveHydrated(false);
         }
     }
 
-    /**
-     * Hydration path: maps existing DOM nodes to binding targets,
-     * swaps onAttributeChangedCallback to a no-op during bind, then
-     * restores it and resolves the isPrerendered promise.
-     */
-    private renderPrerendered(
-        template: ElementViewTemplate,
-        element: TElement,
-        host: Node,
-    ): void {
-        const tracker = ElementController.hydrationTracker;
-        tracker?.add(element);
-        tracker?.notifyWillHydrate(element);
-
-        const firstChild = host.firstChild!;
-        const lastChild = host.lastChild!;
-
-        (this as Mutable<this>).view = (
-            template as HydratableElementViewTemplate
-        ).hydrate(firstChild, lastChild, element);
-
-        // Swap to a no-op so the upgrade-time burst of
-        // attributeChangedCallbacks is silently discarded.
-        const realHandler = this.onAttributeChangedCallback;
-        this.onAttributeChangedCallback = noopAttributeHandler;
-
-        // Flag the view so directives skip attribute/booleanAttribute
-        // DOM updates during bind, and set the public promise.
-        (this.view as any)._skipAttrUpdates = true;
-        (this.view as any).isPrerendered = Promise.resolve(true);
-        this.view!.bind(this.source);
-        (this.view as any)._skipAttrUpdates = false;
-
-        // Restore the real handler — all future attribute changes
-        // flow through the standard path with zero overhead.
-        this.onAttributeChangedCallback = realHandler;
-
-        (this.view as any as Mutable<ViewController>).sourceLifetime =
-            SourceLifetime.coupled;
-        this.hasExistingShadowRoot = false;
-
-        tracker?.remove(element);
-    }
-
     /**
      * Standard client-side render: clears any stale content, clones the
      * compiled fragment, binds, and appends to the host.
@@ -901,19 +897,36 @@ export class ElementController<TElement extends HTMLElement = HTMLElement>
         elementControllerStrategy = strategy;
     }
 
-    // --- Static hydration tracking ---
+    // --- Static hydration hook ---
 
     /**
-     * Tracks prerendered elements through the hydration lifecycle.
+     * A hook that, when set, handles prerendered content hydration.
+     * Called by renderTemplate when an existing shadow root is detected.
+     * Returns true if hydration was performed, false to fall back to client-side.
+     * @internal
      */
-    private static hydrationTracker: HydrationTracker | null = null;
+    private static hydrationHook:
+        | ((
+              controller: ElementController,
+              template: ElementViewTemplate,
+              element: HTMLElement,
+              host: Node,
+          ) => boolean)
+        | null = null;
 
     /**
-     * Configure lifecycle callbacks for element hydration tracking.
-     * @param callbacks - Lifecycle callbacks to configure.
+     * Installs the hydration hook. Called by enableHydration().
+     * @internal
      */
-    public static configHydration(callbacks: ElementHydrationCallbacks): void {
-        ElementController.hydrationTracker = new HydrationTracker(callbacks);
+    public static installHydrationHook(
+        hook: (
+            controller: ElementController,
+            template: ElementViewTemplate,
+            element: HTMLElement,
+            host: Node,
+        ) => boolean,
+    ): void {
+        ElementController.hydrationHook = hook;
     }
 }
 
diff --git a/packages/fast-element/src/components/enable-hydration.ts b/packages/fast-element/src/components/enable-hydration.ts
new file mode 100644
index 00000000000..cec269b7f38
--- /dev/null
+++ b/packages/fast-element/src/components/enable-hydration.ts
@@ -0,0 +1,119 @@
+import type { Mutable } from "../interfaces.js";
+import { ensureHydrationRuntime } from "../hydration/runtime.js";
+import { SourceLifetime } from "../observation/observable.js";
+import type { ViewController } from "../templating/html-directive.js";
+import type { HydratableElementViewTemplate } from "../templating/template.js";
+import { ElementController } from "./element-controller.js";
+import { isHydratable } from "./hydration.js";
+import { type HydrationOptions, HydrationTracker } from "./hydration-tracker.js";
+
+export type { HydrationOptions };
+
+/**
+ * No-op handler used during prerendered bind to discard the
+ * upgrade-time burst of attributeChangedCallbacks.
+ */
+function noopAttributeHandler() {}
+
+let tracker: HydrationTracker | null = null;
+let hookInstalled = false;
+
+/**
+ * Enables hydration support for prerendered FAST elements.
+ *
+ * @remarks
+ * Call this before any FAST elements connect to the DOM. Hydration
+ * logic is not active unless this function is called, keeping
+ * `FASTElement` lightweight for client-side-only applications.
+ *
+ * Safe to call multiple times — the hydration hook is installed once
+ * and subsequent calls merge their options into the shared tracker.
+ *
+ * @example
+ * ```ts
+ * import { enableHydration } from "@microsoft/fast-element/hydration.js";
+ *
+ * enableHydration({
+ *     hydrationComplete() {
+ *         console.log("hydration complete");
+ *     },
+ * });
+ * ```
+ *
+ * @param options - Optional callbacks for global hydration events.
+ * @public
+ */
+export function enableHydration(options?: HydrationOptions): void {
+    ensureHydrationRuntime();
+
+    if (!hookInstalled) {
+        tracker = new HydrationTracker(options ?? {});
+        hookInstalled = true;
+        const activeTracker = tracker;
+
+        ElementController.installHydrationHook(
+        (controller, template, element, host) => {
+            if (!isHydratable(template)) {
+                return false;
+            }
+
+            const callbacks = controller.definition.lifecycleCallbacks;
+            activeTracker.add(element);
+
+            try {
+                try {
+                    callbacks?.elementWillHydrate?.(element);
+                } catch {
+                    // A lifecycle callback must never prevent hydration.
+                }
+
+                const firstChild = host.firstChild!;
+                const lastChild = host.lastChild!;
+
+                const view = (
+                    template as HydratableElementViewTemplate
+                ).hydrate(firstChild, lastChild, element);
+
+                (controller as any).view = view;
+
+                const realHandler = controller.onAttributeChangedCallback;
+                controller.onAttributeChangedCallback = noopAttributeHandler;
+
+                try {
+                    (view as any)._skipAttrUpdates = true;
+                    (view as any).isPrerendered = Promise.resolve(true);
+                    (view as any).isHydrated = Promise.resolve(true);
+                    view.bind(controller.source);
+                    (view as any)._skipAttrUpdates = false;
+                } finally {
+                    controller.onAttributeChangedCallback = realHandler;
+                }
+
+                (view as any as Mutable<ViewController>).sourceLifetime =
+                    SourceLifetime.coupled;
+                (controller as any).hasExistingShadowRoot = false;
+
+                try {
+                    callbacks?.elementDidHydrate?.(element);
+                } catch {
+                    // A lifecycle callback must never prevent post-hydration work.
+                }
+            } finally {
+                activeTracker.remove(element);
+            }
+
+            return true;
+        },
+    );
+    } else if (options && tracker) {
+        // Merge options into existing tracker for subsequent calls
+        tracker.mergeOptions(options);
+    }
+}
+
+/**
+ * The attribute used to defer hydration of an element.
+ * Retained for intersection observer viewport hydration rendering.
+ * @beta
+ */
+export const deferHydrationAttribute = "defer-hydration";
diff --git a/packages/fast-element/src/components/fast-definitions.ts b/packages/fast-element/src/components/fast-definitions.ts
index 6d572cf5431..954c7012cb7 100644
--- a/packages/fast-element/src/components/fast-definitions.ts
+++ b/packages/fast-element/src/components/fast-definitions.ts
@@ -1,11 +1,6 @@
-import {
-    type Constructable,
-    isFunction,
-    isString,
-    KernelServiceId,
-} from "../interfaces.js";
+import { type Constructable, isFunction, isString } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
-import { createTypeRegistry, FAST, type TypeRegistry } from "../platform.js";
+import { createTypeRegistry, type TypeRegistry } from "../platform.js";
 import { type ComposableStyles, ElementStyles } from "../styles/element-styles.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import { type AttributeConfiguration, AttributeDefinition } from "./attributes.js";
@@ -18,10 +13,8 @@ const fastElementBaseTypes = new Set<Function>();
  * The FAST custom element registry
  * @internal
  */
-export const fastElementRegistry: TypeRegistry<FASTElementDefinition> = FAST.getById(
-    KernelServiceId.elementRegistry,
-    () => createTypeRegistry<FASTElementDefinition>(),
-);
+export const fastElementRegistry: TypeRegistry<FASTElementDefinition> =
+    createTypeRegistry<FASTElementDefinition>();
 
 export type { TypeRegistry };
 
@@ -44,14 +37,34 @@ export interface ShadowRootOptions extends ShadowRootInit {
  */
 export interface TemplateLifecycleCallbacks {
     /**
-     * Called after the template has been assigned to the definition
+     * Called after the JS class definition has been registered.
+     */
+    elementDidRegister?(name: string): void;
+
+    /**
+     * Called before the template has been evaluated and assigned.
+     */
+    templateWillUpdate?(name: string): void;
+
+    /**
+     * Called after the template has been assigned to the definition.
      */
     templateDidUpdate?(name: string): void;
 
     /**
-     * Called after the custom element has been defined
+     * Called after the custom element has been defined.
      */
     elementDidDefine?(name: string): void;
+
+    /**
+     * Called before an individual element's hydration begins.
+     */
+    elementWillHydrate?(source: HTMLElement): void;
+
+    /**
+     * Called after an individual element's hydration has finished.
+     */
+    elementDidHydrate?(source: HTMLElement): void;
 }
 
 /**
diff --git a/packages/fast-element/src/components/hydration-tracker.ts b/packages/fast-element/src/components/hydration-tracker.ts
index 42cd8abaa61..f30727c1b73 100644
--- a/packages/fast-element/src/components/hydration-tracker.ts
+++ b/packages/fast-element/src/components/hydration-tracker.ts
@@ -1,23 +1,19 @@
 /**
- * Lifecycle callbacks for element hydration events.
+ * Options for configuring global hydration lifecycle events.
  * @public
  */
-export interface ElementHydrationCallbacks {
+export interface HydrationOptions {
     /** Called once when the first prerendered element begins hydrating. */
     hydrationStarted?(): void;
-    /** Called before an individual element's hydration begins. */
-    elementWillHydrate?(source: HTMLElement): void;
-    /** Called after an individual element's hydration has finished. */
-    elementDidHydrate?(source: HTMLElement): void;
     /** Called after all prerendered elements have completed hydration. */
     hydrationComplete?(): void;
 }
 
 /**
  * Tracks prerendered elements through the hydration lifecycle and
- * fires callbacks at each stage. Each element is added before its
- * hydration bind and removed after. When the last element finishes
- * and no new elements arrive, `hydrationComplete` is fired.
+ * fires global callbacks at start and completion. Per-element callbacks
+ * (`elementWillHydrate`, `elementDidHydrate`) are handled through
+ * definition-level {@link TemplateLifecycleCallbacks}.
  *
  * @public
  */
@@ -26,7 +22,7 @@ export class HydrationTracker {
     private started = false;
     private checkTimer: ReturnType<typeof setTimeout> | null = null;
 
-    constructor(private callbacks: ElementHydrationCallbacks) {}
+    constructor(private options: HydrationOptions) {}
 
     /**
      * Registers an element as pending hydration.
@@ -36,7 +32,7 @@ export class HydrationTracker {
         if (!this.started) {
             this.started = true;
             try {
-                this.callbacks.hydrationStarted?.();
+                this.options.hydrationStarted?.();
             } catch {
                 // A lifecycle callback must never prevent hydration.
             }
@@ -46,28 +42,10 @@ export class HydrationTracker {
     }
 
     /**
-     * Fires the `elementWillHydrate` callback for an element.
-     */
-    public notifyWillHydrate(element: HTMLElement): void {
-        try {
-            this.callbacks.elementWillHydrate?.(element);
-        } catch {
-            // A lifecycle callback must never prevent hydration.
-        }
-    }
-
-    /**
-     * Removes an element from the pending set, fires
-     * `elementDidHydrate`, and schedules a debounced
-     * completion check.
+     * Removes an element from the pending set and schedules
+     * a debounced completion check.
      */
     public remove(element: HTMLElement): void {
-        try {
-            this.callbacks.elementDidHydrate?.(element);
-        } catch {
-            // A lifecycle callback must never prevent hydration.
-        }
-
         this.elements.delete(element);
 
         // Debounce: reset on every removal so we wait until no
@@ -82,7 +60,7 @@ export class HydrationTracker {
 
                 if (this.elements.size === 0) {
                     try {
-                        this.callbacks.hydrationComplete?.();
+                        this.options.hydrationComplete?.();
                     } catch {
                         // A lifecycle callback must never prevent post-hydration cleanup.
                     }
@@ -90,4 +68,42 @@ export class HydrationTracker {
             }, 0);
         }
     }
+
+    /**
+     * Merges additional options into the tracker, chaining
+     * callbacks so both the original and new callbacks fire.
+     */
+    public mergeOptions(incoming: HydrationOptions): void {
+        const prev = this.options;
+        this.options = {
+            hydrationStarted: chainCallback(
+                prev.hydrationStarted,
+                incoming.hydrationStarted,
+            ),
+            hydrationComplete: chainCallback(
+                prev.hydrationComplete,
+                incoming.hydrationComplete,
+            ),
+        };
+    }
+}
+
+function chainCallback(
+    first: (() => void) | undefined,
+    second: (() => void) | undefined,
+): (() => void) | undefined {
+    if (!first) return second;
+    if (!second) return first;
+    return () => {
+        try {
+            first();
+        } catch {
+            // Isolate callbacks so one consumer cannot suppress another.
+        }
+        try {
+            second();
+        } catch {
+            // Isolate callbacks so one consumer cannot suppress another.
+        }
+    };
 }
diff --git a/packages/fast-element/src/components/hydration.pw.spec.ts b/packages/fast-element/src/components/hydration.pw.spec.ts
index 9a713d93d94..c6b1f116773 100644
--- a/packages/fast-element/src/components/hydration.pw.spec.ts
+++ b/packages/fast-element/src/components/hydration.pw.spec.ts
@@ -30,15 +30,17 @@ test.describe("The prerendered content optimization", () => {
 
             return {
                 isPrerendered: await element.$fastController.isPrerendered,
+                isHydrated: await element.$fastController.isHydrated,
                 shadowContent: element.shadowRoot?.innerHTML ?? "",
             };
         });
 
         expect(result.isPrerendered).toBe(false);
+        expect(result.isHydrated).toBe(false);
         expect(result.shadowContent).toContain("hello");
     });
 
-    test("should set isPrerendered to true when an existing shadow root is detected via DSD", async ({
+    test("should detect DSD but not hydrate when hydration is not enabled", async ({
         page,
     }) => {
         await page.goto("/");
@@ -59,7 +61,7 @@ test.describe("The prerendered content optimization", () => {
             const element = container.firstElementChild as any;
             const hasShadowRootBefore = !!element.shadowRoot;
 
-            // Now define — triggers upgrade with existing shadow root
+            // Define without enabling hydration — falls back to client-side render
             (
                 await FASTElementDefinition.compose(
                     class TestElement extends FASTElement {
@@ -76,11 +78,15 @@ test.describe("The prerendered content optimization", () => {
             return {
                 hasShadowRootBefore,
                 isPrerendered: await element.$fastController.isPrerendered,
+                isHydrated: await element.$fastController.isHydrated,
             };
         });
 
         expect(result.hasShadowRootBefore).toBe(true);
+        // DSD exists, so isPrerendered is true
         expect(result.isPrerendered).toBe(true);
+        // Without enableHydration(), content is not hydrated
+        expect(result.isHydrated).toBe(false);
     });
 
     test("should connect immediately when a template is assigned later", async ({
diff --git a/packages/fast-element/src/components/hydration.ts b/packages/fast-element/src/components/hydration.ts
index cbceee24827..46031c504ae 100644
--- a/packages/fast-element/src/components/hydration.ts
+++ b/packages/fast-element/src/components/hydration.ts
@@ -1,3 +1,5 @@
+import { Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import type {
     ContentTemplate,
     HydratableContentTemplate,
@@ -9,9 +11,7 @@ import type {
     HydratableSyntheticViewTemplate,
     SyntheticViewTemplate,
 } from "../templating/template.js";
-import type { HydrationView } from "../templating/view.js";
-import { Message } from "../interfaces.js";
-import { FAST } from "../platform.js";
+import type { HydrationView } from "../templating/hydration-view.js";
 
 /**
  * Data-free sequential hydration markers.
@@ -152,8 +152,3 @@ export function isHydratable(value: any): any {
     return value[Hydratable] === Hydratable;
 }
 
-/**
- * The attribute used to defer hydration of an element.
- * @beta
- */
-export const deferHydrationAttribute = "defer-hydration";
diff --git a/packages/fast-element/src/context.pw.spec.ts b/packages/fast-element/src/context.pw.spec.ts
index 3ac40962a6f..31400fbc61d 100644
--- a/packages/fast-element/src/context.pw.spec.ts
+++ b/packages/fast-element/src/context.pw.spec.ts
@@ -194,7 +194,7 @@ test.describe("Context", () => {
                         event.stopImmediatePropagation();
                         event.callback(value);
                     },
-                    TestContext
+                    TestContext,
                 );
 
                 return Context.get(child, TestContext);
@@ -224,7 +224,7 @@ test.describe("Context", () => {
                         event.stopImmediatePropagation();
                         event.callback(value);
                     },
-                    TestContext
+                    TestContext,
                 );
 
                 let capture = "";
@@ -290,7 +290,7 @@ test.describe("Context", () => {
                             event.stopImmediatePropagation();
                             event.callback(rightValue);
                         },
-                        TestContext
+                        TestContext,
                     );
 
                     let capture = "";
@@ -301,7 +301,7 @@ test.describe("Context", () => {
 
                     return capture;
                 },
-                [wrongValue, rightValue]
+                [wrongValue, rightValue],
             );
 
             expect(capture).toBe(rightValue);
diff --git a/packages/fast-element/src/context.ts b/packages/fast-element/src/context.ts
index 83f073f8128..1b37cfaed4f 100644
--- a/packages/fast-element/src/context.ts
+++ b/packages/fast-element/src/context.ts
@@ -32,7 +32,7 @@ export type FASTContext<T> = ContextDecorator<T> & {
     request(target: EventTarget, callback: ContextCallback<T>, multiple?: boolean): void;
     handle(
         target: EventTarget,
-        callback: (event: ContextEvent<FASTContext<T>>) => void
+        callback: (event: ContextEvent<FASTContext<T>>) => void,
     ): void;
 };
 
@@ -46,7 +46,7 @@ export type FASTContextRequestStrategy = <T extends UnknownContext>(
     target: EventTarget,
     context: T,
     callback: ContextCallback<ContextType<T>>,
-    multiple
+    multiple,
 ) => void;
 
 const contextsByName = new Map<string, FASTContext<unknown>>();
@@ -91,7 +91,7 @@ export const Context = Object.freeze({
         const Interface = function (
             target: Constructable<Node>,
             property: string,
-            index: number
+            index: number,
         ): void {
             if (target == null || new.target !== undefined) {
                 throw FAST.error(Message.noRegistrationForContext, {
@@ -113,7 +113,7 @@ export const Context = Object.freeze({
 
         Interface.handle = (
             target: EventTarget,
-            callback: (event: ContextEvent<FASTContext<T>>) => void
+            callback: (event: ContextEvent<FASTContext<T>>) => void,
         ) => Context.handle(target, callback, Interface);
 
         Interface.provide = (target: EventTarget, value: T) =>
@@ -124,7 +124,7 @@ export const Context = Object.freeze({
         Interface.request = (
             target: EventTarget,
             callback: ContextCallback<T>,
-            multiple?: boolean
+            multiple?: boolean,
         ) => Context.request(target, Interface, callback, multiple);
 
         Interface.toString = () => `Context<${Interface.name}>`;
@@ -171,7 +171,7 @@ export const Context = Object.freeze({
         target: EventTarget,
         context: T,
         callback: ContextCallback<ContextType<T>>,
-        multiple = false
+        multiple = false,
     ): void {
         requestStrategy(target, context, callback, multiple);
     },
@@ -191,7 +191,7 @@ export const Context = Object.freeze({
         target: EventTarget,
         context: T,
         callback: ContextCallback<ContextType<T>>,
-        multiple = false
+        multiple = false,
     ) {
         target.dispatchEvent(new ContextEvent(context, callback, multiple));
     },
@@ -205,7 +205,7 @@ export const Context = Object.freeze({
     provide<T extends UnknownContext>(
         target: EventTarget,
         context: T,
-        value: ContextType<T>
+        value: ContextType<T>,
     ) {
         Context.handle(
             target,
@@ -213,7 +213,7 @@ export const Context = Object.freeze({
                 event.stopImmediatePropagation();
                 event.callback(value);
             },
-            context
+            context,
         );
     },
 
@@ -229,7 +229,7 @@ export const Context = Object.freeze({
     handle<T extends UnknownContext>(
         target: EventTarget,
         callback: (event: ContextEvent<T>) => void,
-        context?: T
+        context?: T,
     ) {
         if (context) {
             target.addEventListener(contextEventType, (event: ContextEvent<T>) => {
@@ -255,7 +255,7 @@ export const Context = Object.freeze({
     defineProperty<T extends UnknownContext>(
         target: Constructable<EventTarget> | EventTarget,
         propertyName: string,
-        context: T
+        context: T,
     ) {
         const field = Symbol.for(`fast:di:${propertyName}`);
 
@@ -279,9 +279,8 @@ export type UnknownContext = Context<unknown>;
  * A helper type which can extract a Context value type from a Context type
  * @public
  */
-export type ContextType<T extends UnknownContext> = T extends Context<infer Y>
-    ? Y
-    : never;
+export type ContextType<T extends UnknownContext> =
+    T extends Context<infer Y> ? Y : never;
 
 /**
  * A callback which is provided by a context requester and is called with the value satisfying the request.
@@ -305,7 +304,7 @@ export class ContextEvent<T extends UnknownContext> extends Event {
     public constructor(
         public readonly context: T,
         public readonly callback: ContextCallback<ContextType<T>>,
-        public readonly multiple?: boolean
+        public readonly multiple?: boolean,
     ) {
         super(contextEventType, { bubbles: true, composed: true });
     }
diff --git a/packages/fast-element/src/debug.pw.spec.ts b/packages/fast-element/src/debug.pw.spec.ts
index c7b28c9543c..9e34af8c0b1 100644
--- a/packages/fast-element/src/debug.pw.spec.ts
+++ b/packages/fast-element/src/debug.pw.spec.ts
@@ -1,8 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { enableDebug } from "./debug.js";
-import type { FASTGlobal } from "./interfaces.js";
-
-declare const FAST: FASTGlobal;
+import { FAST } from "./platform.js";
 
 enableDebug();
 
diff --git a/packages/fast-element/src/declarative/runtime.ts b/packages/fast-element/src/declarative/runtime.ts
index d8473d6c9cd..90117c2a7d3 100644
--- a/packages/fast-element/src/declarative/runtime.ts
+++ b/packages/fast-element/src/declarative/runtime.ts
@@ -1,62 +1,20 @@
-import { Hydratable } from "../components/hydration.js";
 import { FAST } from "../platform.js";
-import { ViewTemplate } from "../templating/template.js";
-import { HydrationView } from "../templating/view.js";
+import { ensureHydrationRuntime } from "../hydration/runtime.js";
 import { debugMessages } from "./debug.js";
 
-type HydratableTemplate = ViewTemplate & {
-    [Hydratable]?: symbol;
-    hydrate?: (
-        firstChild: Node,
-        lastChild: Node,
-        hostBindingTarget?: Element,
-    ) => HydrationView;
-};
-
-let runtimeInstalled = false;
+let declarativeRuntimeInstalled = false;
 
 /**
- * Installs declarative runtime hooks on first use.
+ * Installs the declarative runtime: ensures hydration support is
+ * available and registers declarative-specific debug messages.
  * @internal
  */
 export function ensureDeclarativeRuntime(): void {
-    if (runtimeInstalled) {
+    if (declarativeRuntimeInstalled) {
         return;
     }
 
-    const prototype = ViewTemplate.prototype as HydratableTemplate;
-
-    if (prototype[Hydratable] !== Hydratable) {
-        // Configure ViewTemplate to be hydratable by attaching a symbol
-        // identifier and a hydrate method. Augmenting the hydration
-        // features is done by property assignment instead of class extension
-        // to better allow the hydration feature to be tree-shaken.
-        Object.defineProperties(prototype, {
-            [Hydratable]: {
-                value: Hydratable,
-                enumerable: false,
-                configurable: false,
-            },
-            hydrate: {
-                value(
-                    this: ViewTemplate,
-                    firstChild: Node,
-                    lastChild: Node,
-                    hostBindingTarget?: Element,
-                ): HydrationView {
-                    return new HydrationView(
-                        firstChild,
-                        lastChild,
-                        this,
-                        hostBindingTarget,
-                    );
-                },
-                enumerable: true,
-                configurable: false,
-            },
-        });
-    }
-
+    ensureHydrationRuntime();
     FAST.addMessages(debugMessages);
-    runtimeInstalled = true;
+    declarativeRuntimeInstalled = true;
 }
diff --git a/packages/fast-element/src/declarative/template-bridge.ts b/packages/fast-element/src/declarative/template-bridge.ts
index c7a3bcfadbe..cb3d87dc8ee 100644
--- a/packages/fast-element/src/declarative/template-bridge.ts
+++ b/packages/fast-element/src/declarative/template-bridge.ts
@@ -275,7 +275,4 @@ export class DeclarativeTemplateBridge {
  * Shared template bridge storage for the current FAST runtime.
  * @internal
  */
-export const declarativeTemplateBridge = FAST.getById(
-    "fast:declarative-template-bridge",
-    () => new DeclarativeTemplateBridge(),
-) as DeclarativeTemplateBridge;
+export const declarativeTemplateBridge = new DeclarativeTemplateBridge();
diff --git a/packages/fast-element/src/declarative/template.ts b/packages/fast-element/src/declarative/template.ts
index d40451dd338..1fe7b072491 100644
--- a/packages/fast-element/src/declarative/template.ts
+++ b/packages/fast-element/src/declarative/template.ts
@@ -1,14 +1,14 @@
 import { attr } from "../components/attributes.js";
-import { ElementController } from "../components/element-controller.js";
 import {
     FASTElementDefinition,
     type FASTElementTemplateResolver,
     type TemplateLifecycleCallbacks,
 } from "../components/fast-definitions.js";
 import { FASTElement } from "../components/fast-element.js";
+import { enableHydration } from "../components/enable-hydration.js";
 import { FAST } from "../platform.js";
-import { AttributeMap, type AttributeMapConfig } from "./attribute-map.js";
 import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeMap, type AttributeMapConfig } from "./attribute-map.js";
 import {
     getDefinitionElementOptions,
     mergeElementOptions,
@@ -113,36 +113,26 @@ export interface ElementOptionsDictionary<ElementOptionsType = ElementOptions> {
 
 /**
  * Lifecycle callbacks for template events.
- * Combines template lifecycle callbacks with template-processing events.
+ *
+ * @remarks
+ * This interface combines template lifecycle callbacks with
+ * global hydration events. It is accepted by
+ * {@link TemplateElement.config} for backward compatibility.
+ * New code should prefer `enableHydration()` for global
+ * hydration events and pass per-element callbacks directly to
+ * {@link declarativeTemplate}.
+ *
+ * @deprecated Use `enableHydration()` and {@link declarativeTemplate} callbacks instead.
+ * @public
  */
 export interface HydrationLifecycleCallbacks extends TemplateLifecycleCallbacks {
-    /**
-     * Called after the JS class definition has been registered
-     */
-    elementDidRegister?(name: string): void;
-
-    /**
-     * Called before the template has been evaluated and assigned
-     */
-    templateWillUpdate?(name: string): void;
-
     /**
      * Called once when the first element enters the hydration pipeline.
      */
     hydrationStarted?(): void;
 
     /**
-     * Called before an individual element's hydration begins
-     */
-    elementWillHydrate?(source: HTMLElement): void;
-
-    /**
-     * Called after an individual element's hydration has finished
-     */
-    elementDidHydrate?(source: HTMLElement): void;
-
-    /**
-     * Called after all elements have completed hydration
+     * Called after all elements have completed hydration.
      */
     hydrationComplete?(): void;
 }
@@ -150,12 +140,46 @@ export interface HydrationLifecycleCallbacks extends TemplateLifecycleCallbacks
 /**
  * Returns a declarative template resolver that waits for the matching
  * `<f-template>` element and resolves it into a concrete `ViewTemplate`.
+ *
+ * @param callbacks - Optional per-element lifecycle callbacks.
  * @public
  */
-export function declarativeTemplate(): FASTElementTemplateResolver {
+export function declarativeTemplate(
+    callbacks?: TemplateLifecycleCallbacks,
+): FASTElementTemplateResolver {
     ensureDeclarativeRuntime();
 
     return async definition => {
+        if (callbacks) {
+            const existing = definition.lifecycleCallbacks;
+            (definition as MutableFASTElementDefinition).lifecycleCallbacks = {
+                elementDidRegister: chainLifecycleCallback(
+                    existing?.elementDidRegister,
+                    callbacks.elementDidRegister,
+                ),
+                templateWillUpdate: chainLifecycleCallback(
+                    existing?.templateWillUpdate,
+                    callbacks.templateWillUpdate,
+                ),
+                templateDidUpdate: chainLifecycleCallback(
+                    existing?.templateDidUpdate,
+                    callbacks.templateDidUpdate,
+                ),
+                elementDidDefine: chainLifecycleCallback(
+                    existing?.elementDidDefine,
+                    callbacks.elementDidDefine,
+                ),
+                elementWillHydrate: chainLifecycleCallback(
+                    existing?.elementWillHydrate,
+                    callbacks.elementWillHydrate,
+                ),
+                elementDidHydrate: chainLifecycleCallback(
+                    existing?.elementDidHydrate,
+                    callbacks.elementDidHydrate,
+                ),
+            };
+        }
+
         await ensureTemplateElementDefined(definition.registry);
         return declarativeTemplateBridge.requestTemplate(definition);
     };
@@ -186,27 +210,35 @@ class TemplateElement extends FASTElement implements TemplatePublisher {
     private static defaultElementOptions: ElementOptions = {};
 
     /**
-     * Lifecycle callbacks for hydration events
+     * Lifecycle callbacks configured via {@link TemplateElement.config}.
+     * @deprecated Prefer per-element callbacks via {@link declarativeTemplate}.
      */
     private static lifecycleCallbacks: HydrationLifecycleCallbacks = {};
 
     /**
      * Configure lifecycle callbacks for hydration events.
      *
+     * @deprecated Use `enableHydration()` for global hydration events
+     * and pass per-element callbacks to {@link declarativeTemplate} instead.
+     *
      * @param callbacks - Lifecycle callbacks to configure.
      * @returns The {@link TemplateElement} class.
      */
     public static config(callbacks: HydrationLifecycleCallbacks) {
         TemplateElement.lifecycleCallbacks = callbacks;
 
-        // Forward hydration callbacks to ElementController for
-        // element-level hydration tracking.
-        ElementController.configHydration({
-            hydrationStarted: callbacks.hydrationStarted,
-            elementWillHydrate: callbacks.elementWillHydrate,
-            elementDidHydrate: callbacks.elementDidHydrate,
-            hydrationComplete: callbacks.hydrationComplete,
-        });
+        // Forward global hydration callbacks to ElementController
+        if (
+            callbacks.hydrationStarted ||
+            callbacks.hydrationComplete ||
+            callbacks.elementWillHydrate ||
+            callbacks.elementDidHydrate
+        ) {
+            enableHydration({
+                hydrationStarted: callbacks.hydrationStarted,
+                hydrationComplete: callbacks.hydrationComplete,
+            });
+        }
 
         return this;
     }
@@ -290,7 +322,12 @@ class TemplateElement extends FASTElement implements TemplatePublisher {
             throw FAST.error(Message.noTemplateProvided, { name });
         }
 
+        // Fire from definition-level callbacks (set by declarativeTemplate())
+        definition.lifecycleCallbacks?.elementDidRegister?.(name);
+        // Fire from static callbacks (set by TemplateElement.config())
         TemplateElement.lifecycleCallbacks.elementDidRegister?.(name);
+
+        definition.lifecycleCallbacks?.templateWillUpdate?.(name);
         TemplateElement.lifecycleCallbacks.templateWillUpdate?.(name);
 
         const schema = new Schema(name);
@@ -356,23 +393,41 @@ class TemplateElement extends FASTElement implements TemplatePublisher {
     }
 
     private attachLifecycleCallbacks(definition: FASTElementDefinition): void {
+        const defCallbacks = definition.lifecycleCallbacks;
+        const staticCallbacks = TemplateElement.lifecycleCallbacks;
+
         const templateDidUpdate = chainLifecycleCallback(
-            definition.lifecycleCallbacks?.templateDidUpdate,
-            TemplateElement.lifecycleCallbacks.templateDidUpdate,
+            defCallbacks?.templateDidUpdate,
+            staticCallbacks.templateDidUpdate,
         );
         const elementDidDefine = chainLifecycleCallback(
-            definition.lifecycleCallbacks?.elementDidDefine,
-            TemplateElement.lifecycleCallbacks.elementDidDefine,
+            defCallbacks?.elementDidDefine,
+            staticCallbacks.elementDidDefine,
+        );
+        const elementWillHydrate = chainLifecycleCallback(
+            defCallbacks?.elementWillHydrate,
+            staticCallbacks.elementWillHydrate,
+        );
+        const elementDidHydrate = chainLifecycleCallback(
+            defCallbacks?.elementDidHydrate,
+            staticCallbacks.elementDidHydrate,
         );
 
-        if (!templateDidUpdate && !elementDidDefine) {
+        if (
+            !templateDidUpdate &&
+            !elementDidDefine &&
+            !elementWillHydrate &&
+            !elementDidHydrate
+        ) {
             return;
         }
 
         (definition as MutableFASTElementDefinition).lifecycleCallbacks = {
-            ...definition.lifecycleCallbacks,
+            ...defCallbacks,
             templateDidUpdate,
             elementDidDefine,
+            elementWillHydrate,
+            elementDidHydrate,
         };
     }
 }
diff --git a/packages/fast-element/src/di/di.get.pw.spec.ts b/packages/fast-element/src/di/di.get.pw.spec.ts
index f788d8bf7a7..894d86ec6f1 100644
--- a/packages/fast-element/src/di/di.get.pw.spec.ts
+++ b/packages/fast-element/src/di/di.get.pw.spec.ts
@@ -859,7 +859,11 @@ test.describe("DI.getAsync", () => {
         });
 
         class Test {
-            constructor(public one: any, public two: any, public three: any) {}
+            constructor(
+                public one: any,
+                public two: any,
+                public three: any,
+            ) {}
         }
         inject(key1)(Test, undefined, 0);
         inject(key2)(Test, undefined, 1);
@@ -892,7 +896,11 @@ test.describe("DI.getAsync", () => {
         const instance3 = {};
 
         class Test {
-            constructor(public one: any, public two: any, public three: any) {}
+            constructor(
+                public one: any,
+                public two: any,
+                public three: any,
+            ) {}
         }
         inject(key1)(Test, undefined, 0);
         inject(key2)(Test, undefined, 1);
diff --git a/packages/fast-element/src/di/di.getAll.pw.spec.ts b/packages/fast-element/src/di/di.getAll.pw.spec.ts
index 068cf189934..a6c38f20c0c 100644
--- a/packages/fast-element/src/di/di.getAll.pw.spec.ts
+++ b/packages/fast-element/src/di/di.getAll.pw.spec.ts
@@ -48,7 +48,7 @@ test.describe("Container#.getAll", () => {
 
                         class Foo {
                             public constructor(
-                                public readonly attrPatterns: IAttrPattern[]
+                                public readonly attrPatterns: IAttrPattern[],
                             ) {}
                             public patterns(): number[] {
                                 return this.attrPatterns.map(ap => ap.id);
@@ -66,11 +66,11 @@ test.describe("Container#.getAll", () => {
                                         public static register(c: any): void {
                                             Registration.singleton(
                                                 IAttrPattern,
-                                                this
+                                                this,
                                             ).register(c);
                                         }
                                         public id: number = idx;
-                                    }
+                                    },
                             ).forEach(klass => container.register(klass));
                         }
                         if (regInChild) {
@@ -81,11 +81,11 @@ test.describe("Container#.getAll", () => {
                                         public static register(c: any): void {
                                             Registration.singleton(
                                                 IAttrPattern,
-                                                this
+                                                this,
                                             ).register(c);
                                         }
                                         public id: number = idx + 5;
-                                    }
+                                    },
                             ).forEach(klass => child.register(klass));
                         }
                         let parentExpectation: number[] = [];
diff --git a/packages/fast-element/src/di/di.integration.pw.spec.ts b/packages/fast-element/src/di/di.integration.pw.spec.ts
index d0ddb16d0d5..d7b352a6797 100644
--- a/packages/fast-element/src/di/di.integration.pw.spec.ts
+++ b/packages/fast-element/src/di/di.integration.pw.spec.ts
@@ -65,7 +65,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             const container = DI.createContainer();
@@ -82,7 +82,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             const container = DI.createContainer();
@@ -100,7 +100,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             const container = DI.createContainer();
@@ -124,7 +124,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             const container = DI.createContainer();
@@ -150,7 +150,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             const cachedCallback = "cachedCallBack";
             const container = DI.createContainer();
             container.register(
-                Registration.cachedCallback(cachedCallback, callbackToCache)
+                Registration.cachedCallback(cachedCallback, callbackToCache),
             );
 
             const child = container.createChild();
@@ -180,10 +180,10 @@ test.describe("DI.createContext() -> container.get()", () => {
             const container0 = DI.createContainer();
             const container1 = DI.createContainer();
             container0.register(
-                Registration.cachedCallback(cachedCallback, callbackToCache)
+                Registration.cachedCallback(cachedCallback, callbackToCache),
             );
             container1.register(
-                Registration.cachedCallback(cachedCallback, callbackToCache)
+                Registration.cachedCallback(cachedCallback, callbackToCache),
             );
 
             const actual11 = container0.get(cachedCallback);
@@ -249,7 +249,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ICachedCallback = DI.createContext<ICachedCallback>(
                 "ICachedCallback",
-                x => x.cachedCallback(callbackToCache)
+                x => x.cachedCallback(callbackToCache),
             );
 
             const container = DI.createContainer();
@@ -272,7 +272,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ICachedCallback = DI.createContext<ICachedCallback>(
                 "ICachedCallback",
-                x => x.cachedCallback(callbackToCache)
+                x => x.cachedCallback(callbackToCache),
             );
 
             const container0 = DI.createContainer();
@@ -298,7 +298,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             interface IAlias {}
@@ -318,7 +318,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             interface IAlias {}
@@ -339,7 +339,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             interface IAlias {}
@@ -366,7 +366,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             interface IAlias {}
@@ -387,7 +387,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             const container = DI.createContainer();
@@ -406,7 +406,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             const container = DI.createContainer();
@@ -426,7 +426,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             const container = DI.createContainer();
@@ -452,7 +452,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             const container = DI.createContainer();
@@ -474,7 +474,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             interface ITransientParent {
@@ -488,7 +488,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ITransientParent = DI.createContext<ITransientParent>(
                 "ITransientParent",
-                x => x.transient(TransientParent)
+                x => x.transient(TransientParent),
             );
 
             const container = DI.createContainer();
@@ -508,7 +508,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             interface ITransientParent {
@@ -522,7 +522,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ITransientParent = DI.createContext<ITransientParent>(
                 "ITransientParent",
-                x => x.transient(TransientParent)
+                x => x.transient(TransientParent),
             );
 
             const container = DI.createContainer();
@@ -543,7 +543,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             interface ITransientParent {
@@ -557,7 +557,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ITransientParent = DI.createContext<ITransientParent>(
                 "ITransientParent",
-                x => x.transient(TransientParent)
+                x => x.transient(TransientParent),
             );
 
             const container = DI.createContainer();
@@ -583,7 +583,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             interface ITransientParent {
@@ -597,7 +597,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ITransientParent = DI.createContext<ITransientParent>(
                 "ITransientParent",
-                x => x.transient(TransientParent)
+                x => x.transient(TransientParent),
             );
 
             const container = DI.createContainer();
@@ -620,7 +620,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             interface ISingletonParent {
@@ -634,7 +634,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ISingletonParent = DI.createContext<ISingletonParent>(
                 "ISingletonParent",
-                x => x.singleton(SingletonParent)
+                x => x.singleton(SingletonParent),
             );
 
             const container = DI.createContainer();
@@ -654,7 +654,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             interface ISingletonParent {
@@ -668,7 +668,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ISingletonParent = DI.createContext<ISingletonParent>(
                 "ISingletonParent",
-                x => x.singleton(SingletonParent)
+                x => x.singleton(SingletonParent),
             );
 
             const container = DI.createContainer();
@@ -689,7 +689,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             interface ISingletonParent {
@@ -703,7 +703,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ISingletonParent = DI.createContext<ISingletonParent>(
                 "ISingletonParent",
-                x => x.singleton(SingletonParent)
+                x => x.singleton(SingletonParent),
             );
 
             const container = DI.createContainer();
@@ -729,7 +729,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             interface ISingletonParent {
@@ -743,7 +743,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const ISingletonParent = DI.createContext<ISingletonParent>(
                 "ISingletonParent",
-                x => x.singleton(SingletonParent)
+                x => x.singleton(SingletonParent),
             );
 
             const container = DI.createContainer();
@@ -766,7 +766,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Transient implements ITransient {}
 
             const ITransient = DI.createContext<ITransient>("ITransient", x =>
-                x.transient(Transient)
+                x.transient(Transient),
             );
 
             interface IInstanceParent {
@@ -782,7 +782,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             const instanceParent = container.get(InstanceParent);
             const IInstanceParent = DI.createContext<IInstanceParent>(
                 "IInstanceParent",
-                x => x.instance(instanceParent)
+                x => x.instance(instanceParent),
             );
 
             const actual1 = container.get(IInstanceParent);
@@ -801,7 +801,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             class Singleton implements ISingleton {}
 
             const ISingleton = DI.createContext<ISingleton>("ISingleton", x =>
-                x.singleton(Singleton)
+                x.singleton(Singleton),
             );
 
             interface IInstanceParent {
@@ -817,7 +817,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             const instanceParent = container.get(InstanceParent);
             const IInstanceParent = DI.createContext<IInstanceParent>(
                 "IInstanceParent",
-                x => x.instance(instanceParent)
+                x => x.instance(instanceParent),
             );
 
             const actual1 = container.get(IInstanceParent);
@@ -837,7 +837,7 @@ test.describe("DI.createContext() -> container.get()", () => {
 
             const instance = new Instance();
             const IInstance = DI.createContext<IInstance>("IInstance", x =>
-                x.instance(instance)
+                x.instance(instance),
             );
 
             interface IInstanceParent {
@@ -853,7 +853,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             const instanceParent = container.get(InstanceParent);
             const IInstanceParent = DI.createContext<IInstanceParent>(
                 "IInstanceParent",
-                x => x.instance(instanceParent)
+                x => x.instance(instanceParent),
             );
 
             const actual1 = container.get(IInstanceParent);
@@ -878,7 +878,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             };
 
             const ICallback = DI.createContext<ICallback>("ICallback", x =>
-                x.callback(callback)
+                x.callback(callback),
             );
 
             interface IInstanceParent {
@@ -894,7 +894,7 @@ test.describe("DI.createContext() -> container.get()", () => {
             const instanceParent = container.get(InstanceParent);
             const IInstanceParent = DI.createContext<IInstanceParent>(
                 "IInstanceParent",
-                x => x.instance(instanceParent)
+                x => x.instance(instanceParent),
             );
 
             const actual1 = container.get(IInstanceParent);
diff --git a/packages/fast-element/src/di/di.ts b/packages/fast-element/src/di/di.ts
index 2d07eff0f0c..74a3eb77005 100644
--- a/packages/fast-element/src/di/di.ts
+++ b/packages/fast-element/src/di/di.ts
@@ -5,7 +5,7 @@
 import {
     Context,
     type ContextDecorator,
-    ContextEvent,
+    type ContextEvent,
     type UnknownContext,
 } from "../context.js";
 import { type Class, type Constructable, Message } from "../interfaces.js";
@@ -24,7 +24,7 @@ import { emptyArray, FAST } from "../platform.js";
 export type ResolveCallback<T = any> = (
     handler: Container,
     requestor: Container,
-    resolver: Resolver<T>
+    resolver: Resolver<T>,
 ) => T;
 
 // This interface exists only to break a circular type referencing issue in the ServiceLocator interface.
@@ -98,7 +98,7 @@ export interface Factory<T extends Constructable = any> {
      */
     constructAsync(
         container: Container,
-        dynamicDependencies?: Key[]
+        dynamicDependencies?: Key[],
     ): Promise<Resolved<T>>;
 }
 
@@ -175,7 +175,7 @@ export interface ServiceLocator {
      */
     getAll<K extends Key>(
         key: K | Key,
-        searchAncestors?: boolean
+        searchAncestors?: boolean,
     ): readonly Resolved<K>[];
 }
 
@@ -220,7 +220,7 @@ export interface Container extends ServiceLocator {
      */
     registerTransformer<K extends Key, T = K>(
         key: K,
-        transformer: Transformer<T>
+        transformer: Transformer<T>,
     ): boolean;
 
     /**
@@ -231,7 +231,7 @@ export interface Container extends ServiceLocator {
      */
     getResolver<K extends Key, T = K>(
         key: K | Key,
-        autoRegister?: boolean
+        autoRegister?: boolean,
     ): Resolver<T> | null;
 
     /**
@@ -252,7 +252,7 @@ export interface Container extends ServiceLocator {
      * @param config - The configuration for the new container.
      */
     createChild(
-        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>
+        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>,
     ): Container;
 }
 
@@ -281,7 +281,10 @@ export class ResolverBuilder<K> {
      * @param container - The container to create resolvers for.
      * @param key - The key to register resolvers under.
      */
-    public constructor(private container: Container, private key: Key) {}
+    public constructor(
+        private container: Container,
+        private key: Key,
+    ) {}
 
     /**
      * Creates a resolver for an existing object instance.
@@ -330,7 +333,7 @@ export class ResolverBuilder<K> {
     public cachedCallback(value: ResolveCallback<K>): Resolver<K> {
         return this.registerResolver(
             ResolverStrategy.callback,
-            cacheCallbackResult(value)
+            cacheCallbackResult(value),
         );
     }
 
@@ -379,15 +382,16 @@ export type Key = PropertyKey | object | ContextDecorator | Constructable | Reso
  * Represents something resolved from a service locator.
  * @public
  */
-export type Resolved<K> = K extends ContextDecorator<infer T>
-    ? T
-    : K extends Constructable
-    ? InstanceType<K>
-    : K extends ResolverLike<any, infer T1>
-    ? T1 extends Constructable
-        ? InstanceType<T1>
-        : T1
-    : K;
+export type Resolved<K> =
+    K extends ContextDecorator<infer T>
+        ? T
+        : K extends Constructable
+          ? InstanceType<K>
+          : K extends ResolverLike<any, infer T1>
+            ? T1 extends Constructable
+                ? InstanceType<T1>
+                : T1
+            : K;
 
 /**
  * A class that declares constructor injected dependencies through
@@ -529,7 +533,7 @@ function createContext<K extends Key>(
         | string
         | ((builder: ResolverBuilder<K>) => Resolver<K>)
         | InterfaceConfiguration,
-    configuror?: (builder: ResolverBuilder<K>) => Resolver<K>
+    configuror?: (builder: ResolverBuilder<K>) => Resolver<K>,
 ): ContextDecorator<K> {
     const configure =
         typeof nameConfigOrCallback === "function" ? nameConfigOrCallback : configuror;
@@ -537,19 +541,19 @@ function createContext<K extends Key>(
         typeof nameConfigOrCallback === "string"
             ? nameConfigOrCallback
             : nameConfigOrCallback && "friendlyName" in nameConfigOrCallback
-            ? nameConfigOrCallback.friendlyName || defaultFriendlyName
-            : defaultFriendlyName;
+              ? nameConfigOrCallback.friendlyName || defaultFriendlyName
+              : defaultFriendlyName;
     const respectConnection: boolean =
         typeof nameConfigOrCallback === "string"
             ? false
             : nameConfigOrCallback && "respectConnection" in nameConfigOrCallback
-            ? nameConfigOrCallback.respectConnection || false
-            : false;
+              ? nameConfigOrCallback.respectConnection || false
+              : false;
 
     const Interface = function (
         target: Injectable<K>,
         property: string,
-        index: number
+        index: number,
     ): void {
         if (target == null || new.target !== undefined) {
             throw FAST.error(Message.noRegistrationForContext, { name: Interface.name });
@@ -571,7 +575,7 @@ function createContext<K extends Key>(
     if (configure != null) {
         (Interface as any).register = function (
             container: Container,
-            key?: Key
+            key?: Key,
         ): Resolver<K> {
             return configure(new ResolverBuilder(container, key ?? Interface));
         };
@@ -613,7 +617,7 @@ export const DI = Object.freeze({
     createContainer(config?: Partial<ContainerConfiguration>): Container {
         return new ContainerImpl(
             null,
-            Object.assign({}, ContainerConfiguration.default, config)
+            Object.assign({}, ContainerConfiguration.default, config),
         );
     },
 
@@ -629,7 +633,7 @@ export const DI = Object.freeze({
      */
     findResponsibleContainer(
         target: EventTarget,
-        fallback?: () => DOMContainer
+        fallback?: () => DOMContainer,
     ): DOMContainer {
         const owned = (target as any).$$container$$ as ContainerImpl;
 
@@ -651,7 +655,7 @@ export const DI = Object.freeze({
      */
     findParentContainer(
         target: EventTarget,
-        fallback?: () => DOMContainer
+        fallback?: () => DOMContainer,
     ): DOMContainer {
         // NOTE: If there are no node-specific containers in existence other
         // than the root, then we can bypass raising events and instead just grab
@@ -687,7 +691,7 @@ export const DI = Object.freeze({
      */
     getOrCreateDOMContainer(
         target?: EventTarget,
-        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>
+        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>,
     ): DOMContainer {
         if (!target) {
             return (
@@ -696,7 +700,7 @@ export const DI = Object.freeze({
                     typeof window !== "undefined" ? window : null,
                     Object.assign({}, ContainerConfiguration.default, config, {
                         parentLocator: () => null,
-                    })
+                    }),
                 ))
             );
         }
@@ -710,7 +714,7 @@ export const DI = Object.freeze({
                 target,
                 Object.assign({}, ContainerConfiguration.default, config, {
                     parentLocator: DI.findParentContainer,
-                })
+                }),
             );
         }
 
@@ -751,7 +755,7 @@ export const DI = Object.freeze({
                         const Proto = Object.getPrototypeOf(Type);
                         if (typeof Proto === "function" && Proto !== Function.prototype) {
                             dependencies = cloneArrayWithPossibleProps(
-                                DI.getDependencies(Proto)
+                                DI.getDependencies(Proto),
                             );
                         } else {
                             dependencies = [];
@@ -812,7 +816,7 @@ export const DI = Object.freeze({
         target: {},
         propertyName: string,
         key: Key,
-        respectConnection = false
+        respectConnection = false,
     ) {
         const field = Symbol.for(`fast:di:${propertyName}`);
 
@@ -883,12 +887,12 @@ export const DI = Object.freeze({
     ): (
         target: any,
         key?: string | number,
-        descriptor?: PropertyDescriptor | number
+        descriptor?: PropertyDescriptor | number,
     ) => void {
         return function (
             target: any,
             key?: string | number,
-            descriptor?: PropertyDescriptor | number
+            descriptor?: PropertyDescriptor | number,
         ): void {
             if (typeof descriptor === "number") {
                 // It's a parameter decorator.
@@ -941,10 +945,10 @@ export const DI = Object.freeze({
      * @public
      */
     transient<T extends Constructable>(
-        target: T & Partial<RegisterSelf<T>>
+        target: T & Partial<RegisterSelf<T>>,
     ): T & RegisterSelf<T> {
         target.register = function register(
-            container: Container
+            container: Container,
         ): Resolver<InstanceType<T>> {
             const registration = Registration.transient(target as T, target as T);
             return registration.register(container);
@@ -978,10 +982,10 @@ export const DI = Object.freeze({
      */
     singleton<T extends Constructable>(
         target: T & Partial<RegisterSelf<T>>,
-        options: SingletonOptions = defaultSingletonOptions
+        options: SingletonOptions = defaultSingletonOptions,
     ): T & RegisterSelf<T> {
         target.register = function register(
-            container: Container
+            container: Container,
         ): Resolver<InstanceType<T>> {
             const registration = Registration.singleton(target, target);
             return registration.register(container);
@@ -1010,14 +1014,14 @@ export const DOMContainer = Container as unknown as ContextDecorator<DOMContaine
 export const ServiceLocator = Container as unknown as ContextDecorator<ServiceLocator>;
 
 function createResolver(
-    getter: (key: any, handler: Container, requestor: Container) => any
+    getter: (key: any, handler: Container, requestor: Container) => any,
 ): (key: any) => any {
     return function (key: any): ReturnType<typeof DI.inject> {
         const resolver: ReturnType<typeof DI.inject> &
             Partial<Pick<Resolver, "resolve">> & { $isResolver: true } = function (
             target: Injectable,
             property?: string | number,
-            descriptor?: PropertyDescriptor | number
+            descriptor?: PropertyDescriptor | number,
         ): void {
             DI.inject(resolver)(target, property, descriptor);
         };
@@ -1046,7 +1050,7 @@ function createResolver(
 export const inject = DI.inject;
 
 function transientDecorator<T extends Constructable>(
-    target: T & Partial<RegisterSelf<T>>
+    target: T & Partial<RegisterSelf<T>>,
 ): T & RegisterSelf<T> {
     return DI.transient(target);
 }
@@ -1081,11 +1085,11 @@ export function transient<T extends Constructable>(): typeof transientDecorator;
  * @public
  */
 export function transient<T extends Constructable>(
-    target: T & Partial<RegisterSelf<T>>
+    target: T & Partial<RegisterSelf<T>>,
 ): T & RegisterSelf<T>;
 
 export function transient<T extends Constructable>(
-    target?: T & Partial<RegisterSelf<T>>
+    target?: T & Partial<RegisterSelf<T>>,
 ): (T & RegisterSelf<T>) | typeof transientDecorator {
     return target == null ? transientDecorator : transientDecorator(target);
 }
@@ -1094,7 +1098,7 @@ type SingletonOptions = { scoped: boolean };
 const defaultSingletonOptions = { scoped: false };
 
 function singletonDecorator<T extends Constructable>(
-    target: T & Partial<RegisterSelf<T>>
+    target: T & Partial<RegisterSelf<T>>,
 ): T & RegisterSelf<T> {
     return DI.singleton(target);
 }
@@ -1119,7 +1123,7 @@ export function singleton<T extends Constructable>(): typeof singletonDecorator;
  */
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export function singleton<T extends Constructable>(
-    options?: SingletonOptions
+    options?: SingletonOptions,
 ): typeof singletonDecorator;
 
 /**
@@ -1137,14 +1141,14 @@ export function singleton<T extends Constructable>(
  * @public
  */
 export function singleton<T extends Constructable>(
-    target: T & Partial<RegisterSelf<T>>
+    target: T & Partial<RegisterSelf<T>>,
 ): T & RegisterSelf<T>;
 
 /**
  * @public
  */
 export function singleton<T extends Constructable>(
-    targetOrOptions?: (T & Partial<RegisterSelf<T>>) | SingletonOptions
+    targetOrOptions?: (T & Partial<RegisterSelf<T>>) | SingletonOptions,
 ): (T & RegisterSelf<T>) | typeof singletonDecorator {
     if (typeof targetOrOptions === "function") {
         return DI.singleton(targetOrOptions);
@@ -1159,8 +1163,8 @@ function createAllResolver(
         key: any,
         handler: Container,
         requestor: Container,
-        searchAncestors: boolean
-    ) => readonly any[]
+        searchAncestors: boolean,
+    ) => readonly any[],
 ): (key: any, searchAncestors?: boolean) => ReturnType<typeof DI.inject> {
     return function (key: any, searchAncestors?: boolean): ReturnType<typeof DI.inject> {
         searchAncestors = !!searchAncestors;
@@ -1168,7 +1172,7 @@ function createAllResolver(
             Required<Pick<Resolver, "resolve">> & { $isResolver: true } = function (
             target: Injectable,
             property?: string | number,
-            descriptor?: PropertyDescriptor | number
+            descriptor?: PropertyDescriptor | number,
         ): void {
             DI.inject(resolver)(target, property, descriptor);
         };
@@ -1192,7 +1196,7 @@ function createAllResolver(
  */
 export const all = createAllResolver(
     (key: any, handler: Container, requestor: Container, searchAncestors: boolean) =>
-        requestor.getAll(key, searchAncestors)
+        requestor.getAll(key, searchAncestors),
 );
 
 /**
@@ -1230,7 +1234,7 @@ export const all = createAllResolver(
 export const lazy = createResolver(
     (key: Key, handler: Container, requestor: Container) => {
         return () => requestor.get(key);
-    }
+    },
 );
 
 /**
@@ -1266,7 +1270,7 @@ export const optional = createResolver(
         } else {
             return undefined;
         }
-    }
+    },
 );
 
 /**
@@ -1277,7 +1281,7 @@ export const optional = createResolver(
 export function ignore(
     target: Injectable,
     property?: string | number,
-    descriptor?: PropertyDescriptor | number
+    descriptor?: PropertyDescriptor | number,
 ): void {
     DI.inject(ignore)(target, property, descriptor);
 }
@@ -1303,7 +1307,7 @@ export const newInstanceForScope = createResolver(
         const resolver = new ResolverImpl(key, ResolverStrategy.instance, instance);
         requestor.registerResolver(key, resolver);
         return instance;
-    }
+    },
 );
 
 /**
@@ -1316,7 +1320,7 @@ export const newInstanceForScope = createResolver(
  */
 export const newInstanceOf = createResolver(
     (key: any, handler: Container, _requestor: Container) =>
-        createNewInstance(key, handler)
+        createNewInstance(key, handler),
 );
 
 function createNewInstance(key: any, handler: Container) {
@@ -1339,7 +1343,7 @@ export class ResolverImpl implements Resolver, Registration {
     public constructor(
         public key: Key,
         public strategy: ResolverStrategy,
-        public state: any
+        public state: any,
     ) {}
 
     public get $isResolver(): true {
@@ -1446,14 +1450,17 @@ function transformInstance<T>(inst: Resolved<T>, transform: (instance: any) => a
 /** @internal */
 export class FactoryImpl<T extends Constructable = any> implements Factory<T> {
     private transformers: ((instance: any) => any)[] | null = null;
-    public constructor(public Type: T, private readonly dependencies: Key[]) {}
+    public constructor(
+        public Type: T,
+        private readonly dependencies: Key[],
+    ) {}
 
     public async constructAsync(
         container: Container,
-        dynamicDependencies?: Key[]
+        dynamicDependencies?: Key[],
     ): Promise<Resolved<T>> {
         const resolved = await Promise.all(
-            this.dependencies.map(x => container.getAsync(x))
+            this.dependencies.map(x => container.getAsync(x)),
         );
 
         return this.constructCore(resolved, dynamicDependencies);
@@ -1500,13 +1507,13 @@ function isRegistry(obj: Registry | Record<string, Registry>): obj is Registry {
 }
 
 function isSelfRegistry<T extends Constructable>(
-    obj: RegisterSelf<T>
+    obj: RegisterSelf<T>,
 ): obj is RegisterSelf<T> {
     return isRegistry(obj) && typeof obj.registerInRequestor === "boolean";
 }
 
 function isRegisterInRequester<T extends Constructable>(
-    obj: RegisterSelf<T>
+    obj: RegisterSelf<T>,
 ): obj is RegisterSelf<T> {
     return isSelfRegistry(obj) && obj.registerInRequestor;
 }
@@ -1577,7 +1584,10 @@ export class ContainerImpl implements DOMContainer {
         return this.config.responsibleForOwnerRequests;
     }
 
-    constructor(protected owner: any, protected config: ContainerConfiguration) {
+    constructor(
+        protected owner: any,
+        protected config: ContainerConfiguration,
+    ) {
         this.resolvers = new Map();
         this.resolvers.set(Container, containerResolver);
 
@@ -1662,7 +1672,7 @@ export class ContainerImpl implements DOMContainer {
 
     public registerResolver<K extends Key, T = K>(
         key: K,
-        resolver: Resolver<T>
+        resolver: Resolver<T>,
     ): Resolver<T> {
         validateKey(key);
 
@@ -1679,7 +1689,7 @@ export class ContainerImpl implements DOMContainer {
         } else {
             resolvers.set(
                 key,
-                new ResolverImpl(key, ResolverStrategy.array, [result, resolver])
+                new ResolverImpl(key, ResolverStrategy.array, [result, resolver]),
             );
         }
 
@@ -1688,7 +1698,7 @@ export class ContainerImpl implements DOMContainer {
 
     public registerTransformer<K extends Key, T = K>(
         key: K,
-        transformer: Transformer<T>
+        transformer: Transformer<T>,
     ): boolean {
         const resolver = this.getResolver(key);
 
@@ -1708,7 +1718,7 @@ export class ContainerImpl implements DOMContainer {
             // type Constructable. So the return type of that optional method has this additional constraint, which
             // seems to confuse the type checker.
             factory.registerTransformer(
-                transformer as unknown as Transformer<Constructable>
+                transformer as unknown as Transformer<Constructable>,
             );
 
             return true;
@@ -1719,7 +1729,7 @@ export class ContainerImpl implements DOMContainer {
 
     public getResolver<K extends Key, T = K>(
         key: K | Key,
-        autoRegister: boolean = true
+        autoRegister: boolean = true,
     ): Resolver<T> | null {
         validateKey(key);
 
@@ -1737,7 +1747,7 @@ export class ContainerImpl implements DOMContainer {
             if (resolver == null) {
                 if (current.parent == null) {
                     const handler = isRegisterInRequester(
-                        key as unknown as RegisterSelf<Constructable>
+                        key as unknown as RegisterSelf<Constructable>,
                     )
                         ? this
                         : current;
@@ -1757,8 +1767,8 @@ export class ContainerImpl implements DOMContainer {
         return this.resolvers.has(key)
             ? true
             : searchAncestors && this.parent != null
-            ? this.parent.has(key, true)
-            : false;
+              ? this.parent.has(key, true)
+              : false;
     }
 
     public async getAsync<K extends Key>(key: K): Promise<Resolved<K>> {
@@ -1784,7 +1794,7 @@ export class ContainerImpl implements DOMContainer {
                     }
 
                     const handler = isRegisterInRequester(
-                        key as unknown as RegisterSelf<Constructable>
+                        key as unknown as RegisterSelf<Constructable>,
                     )
                         ? this
                         : current;
@@ -1819,7 +1829,7 @@ export class ContainerImpl implements DOMContainer {
             if (resolver == null) {
                 if (current.parent == null) {
                     const handler = isRegisterInRequester(
-                        key as unknown as RegisterSelf<Constructable>
+                        key as unknown as RegisterSelf<Constructable>,
                     )
                         ? this
                         : current;
@@ -1838,13 +1848,11 @@ export class ContainerImpl implements DOMContainer {
 
     public getAll<K extends Key>(
         key: K,
-        searchAncestors: boolean = false
+        searchAncestors: boolean = false,
     ): readonly Resolved<K>[] {
         validateKey(key);
 
-        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
-        const requestor = this;
-        let current: ContainerImpl | null = requestor;
+        let current: ContainerImpl | null = this;
         let resolver: Resolver | undefined;
 
         if (searchAncestors) {
@@ -1856,7 +1864,7 @@ export class ContainerImpl implements DOMContainer {
                 if (resolver != null) {
                     resolutions = resolutions.concat(
                         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                        buildAllResponse(resolver, current, requestor!)
+                        buildAllResponse(resolver, current, this!),
                     );
                 }
 
@@ -1875,7 +1883,7 @@ export class ContainerImpl implements DOMContainer {
                         return emptyArray;
                     }
                 } else {
-                    return buildAllResponse(resolver, current, requestor);
+                    return buildAllResponse(resolver, current, this);
                 }
             }
         }
@@ -1895,7 +1903,7 @@ export class ContainerImpl implements DOMContainer {
 
             factories.set(
                 Type,
-                (factory = new FactoryImpl<K>(Type, DI.getDependencies(Type)))
+                (factory = new FactoryImpl<K>(Type, DI.getDependencies(Type))),
             );
         }
 
@@ -1907,11 +1915,11 @@ export class ContainerImpl implements DOMContainer {
     }
 
     public createChild(
-        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>
+        config?: Partial<Omit<ContainerConfiguration, "parentLocator">>,
     ): Container {
         return new ContainerImpl(
             null,
-            Object.assign({}, this.config, config, { parentLocator: () => this })
+            Object.assign({}, this.config, config, { parentLocator: () => this }),
         );
     }
 
@@ -2014,7 +2022,7 @@ export const Registration = Object.freeze({
      */
     singleton<T extends Constructable>(
         key: Key,
-        value: T
+        value: T,
     ): Registration<InstanceType<T>> {
         return new ResolverImpl(key, ResolverStrategy.singleton, value);
     },
@@ -2033,7 +2041,7 @@ export const Registration = Object.freeze({
      */
     transient<T extends Constructable>(
         key: Key,
-        value: T
+        value: T,
     ): Registration<InstanceType<T>> {
         return new ResolverImpl(key, ResolverStrategy.transient, value);
     },
@@ -2076,7 +2084,7 @@ export const Registration = Object.freeze({
         return new ResolverImpl(
             key,
             ResolverStrategy.callback,
-            cacheCallbackResult(callback)
+            cacheCallbackResult(callback),
         );
     },
 
@@ -2109,7 +2117,7 @@ export function validateKey(key: any): void {
 function buildAllResponse(
     resolver: Resolver,
     handler: Container,
-    requestor: Container
+    requestor: Container,
 ): any[] {
     if (
         resolver instanceof ResolverImpl &&
diff --git a/packages/fast-element/src/hydration.ts b/packages/fast-element/src/hydration.ts
new file mode 100644
index 00000000000..dc773ea598c
--- /dev/null
+++ b/packages/fast-element/src/hydration.ts
@@ -0,0 +1,3 @@
+export type { HydrationOptions } from "./components/enable-hydration.js";
+export { enableHydration } from "./components/enable-hydration.js";
+export { deferHydrationAttribute } from "./components/enable-hydration.js";
diff --git a/packages/fast-element/src/hydration/runtime.ts b/packages/fast-element/src/hydration/runtime.ts
new file mode 100644
index 00000000000..65cbf9f6ac5
--- /dev/null
+++ b/packages/fast-element/src/hydration/runtime.ts
@@ -0,0 +1,57 @@
+import { Hydratable } from "../components/hydration.js";
+import { ViewTemplate } from "../templating/template.js";
+import { HydrationView } from "../templating/hydration-view.js";
+
+type HydratableTemplate = ViewTemplate & {
+    [Hydratable]?: symbol;
+    hydrate?: (
+        firstChild: Node,
+        lastChild: Node,
+        hostBindingTarget?: Element,
+    ) => HydrationView;
+};
+
+let installed = false;
+
+/**
+ * Installs the hydration runtime on `ViewTemplate.prototype`,
+ * making all templates hydratable. Call this before any hydration
+ * occurs. Safe to call multiple times — subsequent calls are no-ops.
+ * @internal
+ */
+export function ensureHydrationRuntime(): void {
+    if (installed) {
+        return;
+    }
+
+    const prototype = ViewTemplate.prototype as HydratableTemplate;
+
+    if (prototype[Hydratable] !== Hydratable) {
+        Object.defineProperties(prototype, {
+            [Hydratable]: {
+                value: Hydratable,
+                enumerable: false,
+                configurable: false,
+            },
+            hydrate: {
+                value(
+                    this: ViewTemplate,
+                    firstChild: Node,
+                    lastChild: Node,
+                    hostBindingTarget?: Element,
+                ): HydrationView {
+                    return new HydrationView(
+                        firstChild,
+                        lastChild,
+                        this,
+                        hostBindingTarget,
+                    );
+                },
+                enumerable: true,
+                configurable: false,
+            },
+        });
+    }
+
+    installed = true;
+}
diff --git a/packages/fast-element/src/index.rollup.ts b/packages/fast-element/src/index.rollup.ts
index f4810542eb0..9f6f9ffe383 100644
--- a/packages/fast-element/src/index.rollup.ts
+++ b/packages/fast-element/src/index.rollup.ts
@@ -1,5 +1,5 @@
-import { DOMPolicy } from "./dom-policy.js";
 import { DOM } from "./dom.js";
+import { DOMPolicy } from "./dom-policy.js";
 
 export * from "./index.js";
 
diff --git a/packages/fast-element/src/index.ts b/packages/fast-element/src/index.ts
index 70504f5124d..988fa1cacbe 100644
--- a/packages/fast-element/src/index.ts
+++ b/packages/fast-element/src/index.ts
@@ -24,6 +24,7 @@ export {
     ElementController,
     Stages,
 } from "./components/element-controller.js";
+export { enableHydration } from "./components/enable-hydration.js";
 export type {
     FASTElementExtension,
     FASTElementTemplateResolver,
@@ -37,9 +38,9 @@ export {
     type TemplateLifecycleCallbacks,
 } from "./components/fast-definitions.js";
 export { customElement, FASTElement } from "./components/fast-element.js";
-export { deferHydrationAttribute, isHydratable } from "./components/hydration.js";
+export { isHydratable } from "./components/hydration.js";
 export {
-    type ElementHydrationCallbacks,
+    type HydrationOptions,
     HydrationTracker,
 } from "./components/hydration-tracker.js";
 // DOM
@@ -49,21 +50,9 @@ export type {
     Class,
     Constructable,
     Disposable,
-    FASTGlobal,
     TrustedTypesPolicy,
 } from "./interfaces.js";
 // Observation
-export {
-    ArrayObserver,
-    type LengthObserver,
-    lengthOf,
-    Sort,
-    type SortObserver,
-    Splice,
-    SpliceStrategy,
-    SpliceStrategySupport,
-    sortedCount,
-} from "./observation/arrays.js";
 export {
     type Notifier,
     PropertyChangeNotifier,
@@ -85,20 +74,17 @@ export {
 } from "./observation/observable.js";
 export { type UpdateQueue, Updates } from "./observation/update-queue.js";
 export { emptyArray, FAST } from "./platform.js";
-export { type CSSTemplateTag, type CSSValue, css } from "./styles/css.js";
-// Styles
-export {
-    CSSDirective,
-    type CSSDirectiveDefinition,
-    cssDirective,
-} from "./styles/css-directive.js";
-export {
-    type ComposableStyles,
-    type ConstructibleStyleStrategy,
+
+// Type-only re-exports for types referenced by root public signatures
+export type {
+    ComposableStyles,
+    ConstructibleStyleStrategy,
     ElementStyles,
 } from "./styles/element-styles.js";
 export type { HostBehavior, HostController } from "./styles/host.js";
 export type { StyleStrategy, StyleTarget } from "./styles/style-strategy.js";
+export type { Splice, Sort } from "./observation/arrays.js";
+
 export type {
     ChildListDirectiveOptions,
     ChildrenDirectiveOptions,
@@ -152,9 +138,10 @@ export type {
 export { html, InlineTemplateDirective, ViewTemplate } from "./templating/template.js";
 export type {
     ElementView,
-    HydratableView,
     SyntheticView,
     View,
 } from "./templating/view.js";
-export { HTMLView, HydrationBindingError } from "./templating/view.js";
+export type { HydratableView } from "./templating/hydration-view.js";
+export { HTMLView } from "./templating/view.js";
+export { HydrationBindingError } from "./templating/hydration-view.js";
 export { when } from "./templating/when.js";
diff --git a/packages/fast-element/src/interfaces.ts b/packages/fast-element/src/interfaces.ts
index 12207aa0679..add2031d01e 100644
--- a/packages/fast-element/src/interfaces.ts
+++ b/packages/fast-element/src/interfaces.ts
@@ -66,53 +66,7 @@ export type ParameterDecorator = (
     parameterIndex: number,
 ) => void;
 
-/**
- * The FAST global.
- * @public
- */
-export interface FASTGlobal {
-    /**
-     * Gets a kernel value.
-     * @param id - The id to get the value for.
-     * @param initialize - Creates the initial value for the id if not already existing.
-     */
-    getById<T>(id: string | number): T | null;
-    getById<T>(id: string | number, initialize: () => T): T;
 
-    /**
-     * Sends a warning to the developer.
-     * @param code - The warning code to send.
-     * @param values - Values relevant for the warning message.
-     */
-    warn(code: number, values?: Record<string, any>): void;
-
-    /**
-     * Creates an error.
-     * @param code - The error code to send.
-     * @param values - Values relevant for the error message.
-     */
-    error(code: number, values?: Record<string, any>): Error;
-
-    /**
-     * Adds debug messages for errors and warnings.
-     * @param messages - The message dictionary to add.
-     * @remarks
-     * Message can include placeholders like $\{name\} which can be
-     * replaced by values passed at runtime.
-     */
-    addMessages(messages: Record<number, string>): void;
-}
-
-/**
- * Core services shared across FAST instances.
- * @internal
- */
-export const enum KernelServiceId {
-    updateQueue = 1,
-    observable = 2,
-    contextEvent = 3,
-    elementRegistry = 4,
-}
 
 /**
  * Warning and error messages.
diff --git a/packages/fast-element/src/metadata.pw.spec.ts b/packages/fast-element/src/metadata.pw.spec.ts
index 0671fdc563b..bfedf8d4b07 100644
--- a/packages/fast-element/src/metadata.pw.spec.ts
+++ b/packages/fast-element/src/metadata.pw.spec.ts
@@ -192,7 +192,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Object],
-                            FooDecoratorInvocation
+                            FooDecoratorInvocation,
                         );
                         decorator()(FooDecoratorInvocation);
 
@@ -228,7 +228,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Object],
-                            FooDecoratorInvocation
+                            FooDecoratorInvocation,
                         );
                         decorator()(FooDecoratorInvocation);
 
@@ -242,7 +242,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Object],
-                            FooDecoratorNonInvocation
+                            FooDecoratorNonInvocation,
                         );
                         (decorator as any)(FooDecoratorNonInvocation);
 
@@ -281,7 +281,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Bar],
-                            FooBar
+                            FooBar,
                         );
                         decorator()(FooBar);
 
@@ -320,7 +320,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Bar, Foo],
-                            FooBar
+                            FooBar,
                         );
                         decorator()(FooBar);
 
@@ -364,7 +364,7 @@ test.describe("Metadata", () => {
                         (Reflect as any).defineMetadata(
                             "design:paramtypes",
                             [Bar, Foo, Baz],
-                            FooBar
+                            FooBar,
                         );
                         decorator()(FooBar);
 
diff --git a/packages/fast-element/src/observable.ts b/packages/fast-element/src/observable.ts
index 37da1bc3dae..c6d717ac630 100644
--- a/packages/fast-element/src/observable.ts
+++ b/packages/fast-element/src/observable.ts
@@ -1,13 +1,9 @@
 /**
  * Observable exports for easy access to the Observable API
  */
-export {
-    ExecutionContext,
-    Observable,
-    observable,
-    SourceLifetime,
-    volatile,
-} from "./observation/observable.js";
+
+export type { Notifier, Subscriber } from "./observation/notifier.js";
+export { PropertyChangeNotifier, SubscriberSet } from "./observation/notifier.js";
 export type {
     Accessor,
     Expression,
@@ -16,6 +12,10 @@ export type {
     ExpressionObserver,
     ObservationRecord,
 } from "./observation/observable.js";
-
-export { PropertyChangeNotifier, SubscriberSet } from "./observation/notifier.js";
-export type { Notifier, Subscriber } from "./observation/notifier.js";
+export {
+    ExecutionContext,
+    Observable,
+    observable,
+    SourceLifetime,
+    volatile,
+} from "./observation/observable.js";
diff --git a/packages/fast-element/src/observation/arrays.pw.spec.ts b/packages/fast-element/src/observation/arrays.pw.spec.ts
index cf76b2b6409..65443336bd3 100644
--- a/packages/fast-element/src/observation/arrays.pw.spec.ts
+++ b/packages/fast-element/src/observation/arrays.pw.spec.ts
@@ -1,11 +1,11 @@
 import { expect, test } from "@playwright/test";
-import { Observable } from "./observable.js";
-import { ArrayObserver, lengthOf, Sort, Splice } from "./arrays.js";
+import { ArrayObserver, lengthOf, type Sort, type Splice } from "./arrays.js";
 import { SubscriberSet } from "./notifier.js";
+import { Observable } from "./observable.js";
 
 const conditionalTimeout = function (
     condition: boolean,
-    iteration = 0
+    iteration = 0,
 ): Promise<boolean> {
     return new Promise(function (resolve) {
         setTimeout(() => {
@@ -267,7 +267,7 @@ test.describe("The ArrayObserver", () => {
     test("observes sorts", async ({ page }) => {
         await page.goto("/");
 
-        let array = [1, 3, 2, 4, 3];
+        const array = [1, 3, 2, 4, 3];
 
         array.sort((a, b) => b - a);
         expect(array).toEqual([4, 3, 3, 2, 1]);
@@ -321,7 +321,7 @@ test.describe("The ArrayObserver", () => {
 
             ArrayObserver.enable();
 
-            let array: any[] = [1, "hello", "world", 4];
+            const array: any[] = [1, "hello", "world", 4];
 
             const observer = Observable.getNotifier<ArrayObserver>(array);
             let changeArgs: Splice[] | null = null;
@@ -365,7 +365,7 @@ test.describe("The ArrayObserver", () => {
 
             ArrayObserver.enable();
 
-            let array: string[] = ["bar", "foo"];
+            const array: string[] = ["bar", "foo"];
 
             const observer = Observable.getNotifier<ArrayObserver>(array);
             let changeArgs: Splice[] | null = null;
@@ -429,7 +429,7 @@ test.describe("The ArrayObserver", () => {
 
             ArrayObserver.enable();
 
-            let array: string[] = ["bar", "foo"];
+            const array: string[] = ["bar", "foo"];
 
             const observer = Observable.getNotifier<ArrayObserver>(array);
             let changeArgs: Splice[] | null = null;
diff --git a/packages/fast-element/src/observation/arrays.ts b/packages/fast-element/src/observation/arrays.ts
index 8fbfc1c5963..bd375c549d9 100644
--- a/packages/fast-element/src/observation/arrays.ts
+++ b/packages/fast-element/src/observation/arrays.ts
@@ -30,7 +30,7 @@ export class Splice {
     public constructor(
         public index: number,
         public removed: any[],
-        public addedCount: number
+        public addedCount: number,
     ) {}
 
     /**
@@ -112,7 +112,7 @@ export interface SpliceStrategy {
     normalize(
         previous: unknown[] | undefined,
         current: unknown[],
-        changes: Splice[] | undefined
+        changes: Splice[] | undefined,
     ): readonly Splice[];
 
     /**
@@ -126,7 +126,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         pop: typeof Array.prototype.pop,
-        args: any[]
+        args: any[],
     ): any;
 
     /**
@@ -140,7 +140,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         push: typeof Array.prototype.push,
-        args: any[]
+        args: any[],
     ): any;
 
     /**
@@ -154,7 +154,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         reverse: typeof Array.prototype.reverse,
-        args: any[]
+        args: any[],
     ): any;
 
     /**
@@ -168,7 +168,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         shift: typeof Array.prototype.shift,
-        args: any[]
+        args: any[],
     ): any;
 
     /**
@@ -182,7 +182,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         sort: typeof Array.prototype.sort,
-        args: any[]
+        args: any[],
     ): any[];
 
     /**
@@ -196,7 +196,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         splice: typeof Array.prototype.splice,
-        args: any[]
+        args: any[],
     ): any;
 
     /**
@@ -210,7 +210,7 @@ export interface SpliceStrategy {
         array: any[],
         observer: ArrayObserver,
         unshift: typeof Array.prototype.unshift,
-        args: any[]
+        args: any[],
     ): any[];
 }
 
@@ -242,7 +242,7 @@ function calcEditDistances(
     currentEnd: number,
     old: any[],
     oldStart: number,
-    oldEnd: number
+    oldEnd: number,
 ): any[] {
     // "Deletion" columns
     const rowCount = oldEnd - oldStart + 1;
@@ -399,7 +399,7 @@ function calc(
     currentEnd: number,
     old: unknown[],
     oldStart: number,
-    oldEnd: number
+    oldEnd: number,
 ): Splice[] {
     let prefixCount = 0;
     let suffixCount = 0;
@@ -435,7 +435,7 @@ function calc(
     }
 
     const ops = spliceOperationsFromEditDistances(
-        calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd)
+        calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd),
     );
 
     const splices: Splice[] = [];
@@ -508,7 +508,7 @@ function merge(splice: Splice, splices: Splice[]): void {
             splice.index,
             splice.index + splice.removed.length,
             current.index,
-            current.index + current.addedCount
+            current.index + current.addedCount,
         );
 
         if (intersectCount >= 0) {
@@ -542,7 +542,7 @@ function merge(splice: Splice, splices: Splice[]): void {
                 ) {
                     // some suffix of splice.removed is appended to current.removed.
                     const append = splice.removed.slice(
-                        current.index + current.addedCount - splice.index
+                        current.index + current.addedCount - splice.index,
                     );
                     currentRemoved.push(...append);
                 }
@@ -597,8 +597,8 @@ function project(array: unknown[], changes: Splice[]): Splice[] {
                 splice.index + splice.addedCount,
                 splice.removed,
                 0,
-                splice.removed.length
-            )
+                splice.removed.length,
+            ),
         );
     }
 
@@ -616,7 +616,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
     normalize(
         previous: unknown[] | undefined,
         current: unknown[],
-        changes: Splice[] | undefined
+        changes: Splice[] | undefined,
     ): readonly Splice[] {
         if (previous === void 0) {
             if (changes === void 0) {
@@ -632,7 +632,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         pop: typeof Array.prototype.pop,
-        args: any[]
+        args: any[],
     ) {
         const notEmpty = array.length > 0;
         const result = pop.apply(array, args);
@@ -648,11 +648,11 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         push: typeof Array.prototype.push,
-        args: any[]
+        args: any[],
     ): any {
         const result = push.apply(array, args);
         observer.addSplice(
-            new Splice(array.length - args.length, [], args.length).adjustTo(array)
+            new Splice(array.length - args.length, [], args.length).adjustTo(array),
         );
         return result;
     },
@@ -661,7 +661,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         reverse: typeof Array.prototype.reverse,
-        args: any[]
+        args: any[],
     ): any {
         const result = reverse.apply(array, args);
         (array as any).sorted++;
@@ -680,7 +680,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         shift: typeof Array.prototype.shift,
-        args: any[]
+        args: any[],
     ): any {
         const notEmpty = array.length > 0;
         const result = shift.apply(array, args);
@@ -696,7 +696,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         sort: typeof Array.prototype.sort,
-        args: any[]
+        args: any[],
     ): any[] {
         const map = new Map();
 
@@ -728,13 +728,13 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         splice: typeof Array.prototype.splice,
-        args: any[]
+        args: any[],
     ): any {
         const result = splice.apply(array, args);
         observer.addSplice(
             new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0).adjustTo(
-                array
-            )
+                array,
+            ),
         );
         return result;
     },
@@ -743,7 +743,7 @@ let defaultMutationStrategy: SpliceStrategy = Object.freeze({
         array: any[],
         observer: ArrayObserver,
         unshift: typeof Array.prototype.unshift,
-        args: any[]
+        args: any[],
     ): any[] {
         const result = unshift.apply(array, args);
         observer.addSplice(new Splice(0, [], args.length).adjustTo(array));
@@ -774,7 +774,7 @@ function setNonEnumerable(
     target: any,
     property: string,
     value: any,
-    writable: boolean = true
+    writable: boolean = true,
 ): void {
     Reflect.defineProperty(target, property, {
         value,
@@ -966,8 +966,8 @@ class DefaultArrayObserver extends SubscriberSet implements ArrayObserver {
                   (this._strategy ?? defaultMutationStrategy).normalize(
                       oldCollection,
                       this.subject,
-                      splices
-                  )
+                      splices,
+                  ),
               );
     }
 
@@ -1002,7 +1002,7 @@ export const ArrayObserver = Object.freeze({
         enabled = true;
 
         Observable.setArrayObserverFactory(
-            (collection: any[]): Notifier => new DefaultArrayObserver(collection)
+            (collection: any[]): Notifier => new DefaultArrayObserver(collection),
         );
 
         const proto = Array.prototype;
@@ -1028,7 +1028,7 @@ export const ArrayObserver = Object.freeze({
                               this,
                               o,
                               method,
-                              args
+                              args,
                           );
                 };
             });
diff --git a/packages/fast-element/src/observation/notifier.pw.spec.ts b/packages/fast-element/src/observation/notifier.pw.spec.ts
index 0901c9b16d9..0ef9bbf2f79 100644
--- a/packages/fast-element/src/observation/notifier.pw.spec.ts
+++ b/packages/fast-element/src/observation/notifier.pw.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { PropertyChangeNotifier, Subscriber, SubscriberSet } from "./notifier.js";
+import { PropertyChangeNotifier, type Subscriber, SubscriberSet } from "./notifier.js";
 
 test.describe(`A SubscriberSet`, () => {
     const oneThroughTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -60,7 +60,7 @@ test.describe(`A SubscriberSet`, () => {
                                 expect(args).toBe(argsValue);
                                 notified.push(this);
                             },
-                        })
+                        }),
                     );
                 });
 
@@ -165,7 +165,7 @@ test.describe(`A PropertyChangeNotifier`, () => {
                         expect(subscriber.invokedWith).toContain(propertyName);
                         expect(subscriber.invokedWith).toContain(nextPropertyName);
                         expect(subscriber.invokedWith).not.toContain(
-                            nextNextPropertyName
+                            nextNextPropertyName,
                         );
                     });
                 });
diff --git a/packages/fast-element/src/observation/observable.pw.spec.ts b/packages/fast-element/src/observation/observable.pw.spec.ts
index bb5481e1526..4004d827685 100644
--- a/packages/fast-element/src/observation/observable.pw.spec.ts
+++ b/packages/fast-element/src/observation/observable.pw.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { ChildModel, DerivedModel, Model } from "../testing/models.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
-import { Expression, Observable } from "./observable.js";
+import { type Expression, Observable } from "./observable.js";
 
 test.describe("The Observable", () => {
     test.describe("facade", () => {
@@ -38,7 +38,7 @@ test.describe("The Observable", () => {
                         wasNotified = true;
                     },
                 },
-                "child"
+                "child",
             );
 
             expect(wasNotified).toBe(false);
@@ -899,7 +899,7 @@ test.describe("The Observable", () => {
                         wasCalledBefore,
                         wasCalledAfter,
                     };
-                }
+                },
             );
 
             expect(valueMatches).toBe(true);
diff --git a/packages/fast-element/src/observation/observable.ts b/packages/fast-element/src/observation/observable.ts
index bb4c4be0fe7..ae5b25a129f 100644
--- a/packages/fast-element/src/observation/observable.ts
+++ b/packages/fast-element/src/observation/observable.ts
@@ -2,7 +2,6 @@ import {
     type Disposable,
     isFunction,
     isString,
-    KernelServiceId,
     Message,
 } from "../interfaces.js";
 import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
@@ -41,7 +40,7 @@ export interface Accessor {
  */
 export type Expression<TSource = any, TReturn = any, TParent = any> = (
     source: TSource,
-    context: ExecutionContext<TParent>
+    context: ExecutionContext<TParent>,
 ) => TReturn;
 
 /**
@@ -170,7 +169,7 @@ export interface ExpressionNotifier<TSource = any, TReturn = any, TParent = any>
  * Common Observable APIs.
  * @public
  */
-export const Observable = FAST.getById(KernelServiceId.observable, () => {
+export const Observable = (() => {
     const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap<any, Notifier>();
@@ -187,7 +186,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
                 ? (found = createArrayObserver(source))
                 : notifierLookup.set(
                       source,
-                      (found = new PropertyChangeNotifier(source))
+                      (found = new PropertyChangeNotifier(source)),
                   );
         }
 
@@ -250,7 +249,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         constructor(
             private expression: Expression<TSource, TReturn>,
             initialSubscriber?: Subscriber,
-            private isVolatileBinding: boolean = false
+            private isVolatileBinding: boolean = false,
         ) {
             super(expression, initialSubscriber);
         }
@@ -465,12 +464,12 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
         binding<TSource = any, TReturn = any>(
             expression: Expression<TSource, TReturn>,
             initialSubscriber?: Subscriber,
-            isVolatileBinding: boolean = this.isVolatileBinding(expression)
+            isVolatileBinding: boolean = this.isVolatileBinding(expression),
         ): ExpressionNotifier<TSource, TReturn> {
             return new ExpressionNotifierImplementation(
                 expression,
                 initialSubscriber,
-                isVolatileBinding
+                isVolatileBinding,
             );
         },
 
@@ -480,12 +479,12 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
          * @param expression - The binding to inspect.
          */
         isVolatileBinding<TSource = any, TReturn = any>(
-            expression: Expression<TSource, TReturn>
+            expression: Expression<TSource, TReturn>,
         ): boolean {
             return volatileRegex.test(expression.toString());
         },
     });
-});
+})();
 
 /**
  * Decorator: Defines an observable property on the target.
@@ -507,7 +506,7 @@ export function observable(target: {}, nameOrAccessor: string | Accessor): void
 export function volatile(
     target: {},
     name: string | Accessor,
-    descriptor: PropertyDescriptor
+    descriptor: PropertyDescriptor,
 ): PropertyDescriptor {
     return Object.assign({}, descriptor, {
         get(this: any) {
@@ -588,7 +587,7 @@ export interface ExecutionContext<TParent = any> {
     eventTarget<TTarget extends EventTarget>(): TTarget;
 }
 
-const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
+const contextEvent = (() => {
     let current: Event | null = null;
 
     return {
@@ -599,7 +598,7 @@ const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
             current = event;
         },
     };
-});
+})();
 
 /**
  * Provides additional contextual information available to behaviors and expressions.
diff --git a/packages/fast-element/src/observation/update-queue.pw.spec.ts b/packages/fast-element/src/observation/update-queue.pw.spec.ts
index 184fc362d88..50dbf591f1e 100644
--- a/packages/fast-element/src/observation/update-queue.pw.spec.ts
+++ b/packages/fast-element/src/observation/update-queue.pw.spec.ts
@@ -98,7 +98,7 @@ test.describe("The UpdateQueue", () => {
                 // @ts-expect-error: Client module.
                 const { Updates } = await import("/main.js");
 
-                let calls: number[] = [];
+                const calls: number[] = [];
 
                 Updates.enqueue(() => {
                     calls.push(0);
@@ -595,7 +595,7 @@ test.describe("The UpdateQueue", () => {
                 let recurseCount1 = 0;
                 let recurseCount2 = 0;
                 let recurseCount3 = 0;
-                let calls: number[] = [];
+                const calls: number[] = [];
 
                 function go1() {
                     calls.push(recurseCount1 * 3);
diff --git a/packages/fast-element/src/observation/update-queue.ts b/packages/fast-element/src/observation/update-queue.ts
index b7bbeff2509..683c4fba8d7 100644
--- a/packages/fast-element/src/observation/update-queue.ts
+++ b/packages/fast-element/src/observation/update-queue.ts
@@ -1,5 +1,4 @@
-import { type Callable, KernelServiceId } from "../interfaces.js";
-import { FAST } from "../platform.js";
+import type { Callable } from "../interfaces.js";
 
 /**
  * A work queue used to synchronize writes to the DOM.
@@ -39,80 +38,71 @@ export interface UpdateQueue {
     setMode(isAsync: boolean): void;
 }
 
-/**
- * The default UpdateQueue.
- * @public
- */
-export const Updates: UpdateQueue = FAST.getById(KernelServiceId.updateQueue, () => {
-    const tasks: Callable[] = [];
-    const pendingErrors: any[] = [];
-    const rAF = globalThis.requestAnimationFrame;
-    let updateAsync = true;
+const tasks: Callable[] = [];
+const pendingErrors: any[] = [];
+const rAF = globalThis.requestAnimationFrame;
+let updateAsync = true;
 
-    function throwFirstError(): void {
-        if (pendingErrors.length) {
-            throw pendingErrors.shift();
-        }
+function throwFirstError(): void {
+    if (pendingErrors.length) {
+        throw pendingErrors.shift();
     }
+}
 
-    function tryRunTask(task: Callable): void {
-        try {
-            (task as any).call();
-        } catch (error) {
-            if (updateAsync) {
-                pendingErrors.push(error);
-                setTimeout(throwFirstError, 0);
-            } else {
-                tasks.length = 0;
-                throw error;
-            }
+function tryRunTask(task: Callable): void {
+    try {
+        (task as any).call();
+    } catch (error) {
+        if (updateAsync) {
+            pendingErrors.push(error);
+            setTimeout(throwFirstError, 0);
+        } else {
+            tasks.length = 0;
+            throw error;
         }
     }
+}
 
-    function process(): void {
-        const capacity = 1024;
-        let index = 0;
-
-        while (index < tasks.length) {
-            tryRunTask(tasks[index]);
-            index++;
+function process(): void {
+    const capacity = 1024;
+    let index = 0;
 
-            // Prevent leaking memory for long chains of recursive calls to `enqueue`.
-            // If we call `enqueue` within a task scheduled by `enqueue`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (
-                    let scan = 0, newLength = tasks.length - index;
-                    scan < newLength;
-                    scan++
-                ) {
-                    tasks[scan] = tasks[scan + index];
-                }
+    while (index < tasks.length) {
+        tryRunTask(tasks[index]);
+        index++;
 
-                tasks.length -= index;
-                index = 0;
+        if (index > capacity) {
+            for (
+                let scan = 0, newLength = tasks.length - index;
+                scan < newLength;
+                scan++
+            ) {
+                tasks[scan] = tasks[scan + index];
             }
-        }
 
-        tasks.length = 0;
+            tasks.length -= index;
+            index = 0;
+        }
     }
 
-    function enqueue(callable: Callable): void {
-        tasks.push(callable);
+    tasks.length = 0;
+}
 
-        if (tasks.length < 2) {
-            updateAsync ? rAF(process) : process();
-        }
+function enqueue(callable: Callable): void {
+    tasks.push(callable);
+
+    if (tasks.length < 2) {
+        updateAsync ? rAF(process) : process();
     }
+}
 
-    return Object.freeze({
-        enqueue,
-        next: () => new Promise(enqueue),
-        process,
-        setMode: (isAsync: boolean) => (updateAsync = isAsync),
-    });
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+export const Updates: UpdateQueue = Object.freeze({
+    enqueue,
+    next: () => new Promise(enqueue),
+    process,
+    setMode: (isAsync: boolean) => (updateAsync = isAsync),
 });
diff --git a/packages/fast-element/src/platform.pw.spec.ts b/packages/fast-element/src/platform.pw.spec.ts
index 9ce04537663..c8e44fb448d 100644
--- a/packages/fast-element/src/platform.pw.spec.ts
+++ b/packages/fast-element/src/platform.pw.spec.ts
@@ -1,35 +1,12 @@
 import { expect, test } from "@playwright/test";
-import type { FASTGlobal } from "./interfaces.js";
-import { createTypeRegistry, type TypeDefinition } from "./platform.js";
-
-declare const FAST: FASTGlobal;
-
-test.describe("The FAST global", () => {
-    test.describe("kernel API", () => {
-        test("can get a lazily defined service by id", async () => {
-            const id = "test-id";
-            const service = {};
-            const found = FAST.getById(id, () => service);
-
-            expect(found).toBe(service);
-        });
-
-        test("returns the first service defined for an id", async () => {
-            const id = "test-id-2";
-            const service1 = {};
-            const service2 = {};
-            const found1 = FAST.getById(id, () => service1);
-            const found2 = FAST.getById(id, () => service2);
-
-            expect(found1).toBe(service1);
-            expect(found2).toBe(service1);
-        });
-
-        test("returns null for optional services", async () => {
-            const id = "test-id-3";
-            const found = FAST.getById(id);
-
-            expect(found).toBeNull();
+import { createTypeRegistry, FAST, type TypeDefinition } from "./platform.js";
+
+test.describe("The FAST module", () => {
+    test.describe("messaging API", () => {
+        test("can create errors with codes", async () => {
+            const error = FAST.error(42);
+            expect(error).toBeInstanceOf(Error);
+            expect(error.message).toContain("42");
         });
     });
 });
diff --git a/packages/fast-element/src/platform.ts b/packages/fast-element/src/platform.ts
index 70531d0591b..715e7b45edb 100644
--- a/packages/fast-element/src/platform.ts
+++ b/packages/fast-element/src/platform.ts
@@ -1,65 +1,43 @@
-import { type FASTGlobal, noop } from "./interfaces.js";
-import { ensureRequestIdleCallback } from "./polyfills.js";
+import { noop } from "./interfaces.js";
 
-const debugMessageLookupKey = "fast:debug-messages";
-
-// ensure FAST global
-const propConfig = {
-    configurable: false,
-    enumerable: false,
-    writable: false,
-};
-
-ensureRequestIdleCallback();
-
-if (globalThis.FAST === void 0) {
-    Reflect.defineProperty(globalThis, "FAST", {
-        value: Object.create(null),
-        ...propConfig,
-    });
-}
+const debugMessages: Record<number, string> = Object.create(null);
 
 /**
- * The FAST global.
+ * The FAST messaging API for warnings and errors.
  * @public
  */
-export const FAST: FASTGlobal = globalThis.FAST;
-
-if (FAST.getById === void 0) {
-    const storage = Object.create(null);
-
-    Reflect.defineProperty(FAST, "getById", {
-        value<T>(id: string | number, initialize?: () => T): T | null {
-            let found = storage[id];
-
-            if (found === void 0) {
-                found = initialize ? (storage[id] = initialize()) : null;
-            }
-
-            return found;
-        },
-        ...propConfig,
-    });
-}
+export const FAST = {
+    /**
+     * Sends a warning to the developer.
+     * @param code - The warning code to send.
+     * @param values - Values relevant for the warning message.
+     */
+    warn(_code: number, _values?: Record<string, any>): void {},
+
+    /**
+     * Creates an error from a code.
+     * @param code - The error code.
+     * @param values - Values relevant for the error message.
+     */
+    error(code: number, _values?: Record<string, any>): Error {
+        return new Error(`Error ${code}`);
+    },
+
+    /**
+     * Adds debug messages for errors and warnings.
+     * @param messages - The message dictionary to add.
+     */
+    addMessages(messages: Record<number, string>): void {
+        Object.assign(debugMessages, messages);
+    },
+};
 
 /**
- * Gets the shared FAST debug message lookup.
+ * Gets the shared debug message lookup.
  * @internal
  */
 export function getDebugMessageLookup(): Record<number, string> {
-    return FAST.getById(debugMessageLookupKey, () => Object.create(null));
-}
-
-if (FAST.error === void 0) {
-    Object.assign(FAST, {
-        warn() {},
-        error(code: number) {
-            return new Error(`Error ${code}`);
-        },
-        addMessages(messages: Record<number, string>) {
-            Object.assign(getDebugMessageLookup(), messages);
-        },
-    });
+    return debugMessages;
 }
 
 /**
diff --git a/packages/fast-element/src/polyfills.ts b/packages/fast-element/src/polyfills.ts
deleted file mode 100644
index af5e82cf743..00000000000
--- a/packages/fast-element/src/polyfills.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Ensures requestIdleCallback and cancelIdleCallback are available.
- * @internal
- */
-export function ensureRequestIdleCallback(): void {
-    if ("requestIdleCallback" in globalThis) {
-        return;
-    }
-
-    /**
-     * A polyfill for requestIdleCallback that falls back to setTimeout.
-     *
-     * @param callback - The function to call when the browser is idle.
-     * @param options - Options object that may contain a timeout property.
-     * @returns An ID that can be used to cancel the callback.
-     * @public
-     */
-    globalThis.requestIdleCallback = function requestIdleCallback(
-        callback: (deadline: IdleDeadline) => void,
-        options?: { timeout: number },
-    ): number {
-        const start = Date.now();
-        return setTimeout(() => {
-            callback({
-                didTimeout: options?.timeout
-                    ? Date.now() - start >= options.timeout
-                    : false,
-                timeRemaining: () => 0,
-            });
-        }, 1) as unknown as number;
-    };
-
-    /**
-     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
-     *
-     * @param id - The ID of the callback to cancel.
-     * @public
-     */
-    globalThis.cancelIdleCallback = function cancelIdleCallback(
-        id: ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>,
-    ): void {
-        clearTimeout(id);
-    };
-}
diff --git a/packages/fast-element/src/state/exports.ts b/packages/fast-element/src/state/exports.ts
index b5446e9029b..ba9b04f9b0e 100644
--- a/packages/fast-element/src/state/exports.ts
+++ b/packages/fast-element/src/state/exports.ts
@@ -1,3 +1,3 @@
 export { reactive } from "./reactive.js";
-export { watch } from "./watch.js";
 export * from "./state.js";
+export { watch } from "./watch.js";
diff --git a/packages/fast-element/src/state/state.pw.spec.ts b/packages/fast-element/src/state/state.pw.spec.ts
index 8ed7995e19b..c8344430a26 100644
--- a/packages/fast-element/src/state/state.pw.spec.ts
+++ b/packages/fast-element/src/state/state.pw.spec.ts
@@ -75,7 +75,7 @@ test.describe("State", () => {
                         c: 2,
                     },
                 },
-                { deep: true }
+                { deep: true },
             );
 
             let callCount = 0;
@@ -189,7 +189,7 @@ test.describe("OwnedState", () => {
                         c: 2,
                     },
                 },
-                { deep: true }
+                { deep: true },
             );
             const owner1 = {};
 
diff --git a/packages/fast-element/src/state/state.ts b/packages/fast-element/src/state/state.ts
index 67496b238d3..a5ff402def2 100644
--- a/packages/fast-element/src/state/state.ts
+++ b/packages/fast-element/src/state/state.ts
@@ -72,7 +72,7 @@ export type State<T> = ReadonlyState<T> & {
  */
 export function state<T>(
     value: T,
-    options: string | StateOptions = defaultStateOptions
+    options: string | StateOptions = defaultStateOptions,
 ): State<T> {
     if (isString(options)) {
         options = { deep: false, name: options };
@@ -146,7 +146,7 @@ export type OwnedState<T> = ReadonlyOwnedState<T> & {
  */
 export function ownedState<T>(
     value: T | (() => T),
-    options: string | StateOptions = defaultStateOptions
+    options: string | StateOptions = defaultStateOptions,
 ): OwnedState<T> {
     if (isString(options)) {
         options = { deep: false, name: options };
@@ -164,7 +164,7 @@ export function ownedState<T>(
         if (host === void 0) {
             host = reactive(
                 { value: (value as () => T)() },
-                (options as StateOptions).deep
+                (options as StateOptions).deep,
             );
 
             storage.set(owner, host);
@@ -251,7 +251,7 @@ export type ComputedInitializer<T> = (builder: ComputedBuilder) => () => T;
  */
 export function computedState<T>(
     initialize: ComputedInitializer<T>,
-    name = "ComputedState"
+    name = "ComputedState",
 ): ComputedState<T> {
     let setupCallback: ComputedSetupCallback | null = null;
     const builder: ComputedBuilder = {
diff --git a/packages/fast-element/src/state/visitor.ts b/packages/fast-element/src/state/visitor.ts
index 292cbe5ee77..69f50a344db 100644
--- a/packages/fast-element/src/state/visitor.ts
+++ b/packages/fast-element/src/state/visitor.ts
@@ -18,7 +18,7 @@ export function visitObject<TVisitorData>(
     deep: boolean,
     visitor: ObjectVisitor<TVisitorData>,
     data: TVisitorData,
-    traversed: WeakSet<any> | Set<any>
+    traversed: WeakSet<any> | Set<any>,
 ): void {
     if (!shouldTraverse(object, traversed)) {
         return;
diff --git a/packages/fast-element/src/state/watch.pw.spec.ts b/packages/fast-element/src/state/watch.pw.spec.ts
index c7bb4128fdb..31e5c3d0570 100644
--- a/packages/fast-element/src/state/watch.pw.spec.ts
+++ b/packages/fast-element/src/state/watch.pw.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
-import { watch } from "./watch.js";
 import { reactive } from "./reactive.js";
+import { watch } from "./watch.js";
 
 function createComplexObject() {
     return {
diff --git a/packages/fast-element/src/state/watch.ts b/packages/fast-element/src/state/watch.ts
index 0e1505d82db..338fd811636 100644
--- a/packages/fast-element/src/state/watch.ts
+++ b/packages/fast-element/src/state/watch.ts
@@ -30,7 +30,7 @@ const watchVisitor: ObjectVisitor<WatchData> = {
  */
 export function watch(
     object: any,
-    subscriber: Subscriber | ((subject: any, args: any) => void)
+    subscriber: Subscriber | ((subject: any, args: any) => void),
 ): Disposable {
     const data: WatchData = {
         notifiers: [],
diff --git a/packages/fast-element/src/styles.ts b/packages/fast-element/src/styles.ts
new file mode 100644
index 00000000000..3eb3e035ce4
--- /dev/null
+++ b/packages/fast-element/src/styles.ts
@@ -0,0 +1,19 @@
+export { type CSSTemplateTag, type CSSValue, css } from "./styles/css.js";
+export {
+    CSSDirective,
+    type CSSDirectiveDefinition,
+    cssDirective,
+} from "./styles/css-directive.js";
+export {
+    type ComposableStyles,
+    type ConstructibleStyleStrategy,
+    ElementStyles,
+} from "./styles/element-styles.js";
+export type { Constructable } from "./interfaces.js";
+export type {
+    ExecutionContext,
+    ExpressionController,
+    SourceLifetime,
+} from "./observation/observable.js";
+export type { HostBehavior, HostController } from "./styles/host.js";
+export type { StyleStrategy, StyleTarget } from "./styles/style-strategy.js";
diff --git a/packages/fast-element/src/styles/element-styles.ts b/packages/fast-element/src/styles/element-styles.ts
index 72ac59d6d87..c840e3269be 100644
--- a/packages/fast-element/src/styles/element-styles.ts
+++ b/packages/fast-element/src/styles/element-styles.ts
@@ -18,7 +18,7 @@ export type ConstructibleStyleStrategy = {
     new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
 };
 
-let DefaultStyleStrategy: ConstructibleStyleStrategy;
+let DefaultStyleStrategy: ConstructibleStyleStrategy | undefined;
 
 function reduceStyles(
     styles: ReadonlyArray<ComposableStyles>,
@@ -47,7 +47,14 @@ export class ElementStyles {
      */
     public get strategy(): StyleStrategy {
         if (this._strategy === null) {
-            this.withStrategy(DefaultStyleStrategy);
+            if (!DefaultStyleStrategy) {
+                ElementStyles.setDefaultStrategy(
+                    ElementStyles.supportsAdoptedStyleSheets
+                        ? createAdoptedSheetsStrategy()
+                        : createStyleElementStrategy(),
+                );
+            }
+            this.withStrategy(DefaultStyleStrategy!);
         }
 
         return this._strategy!;
@@ -117,3 +124,79 @@ export class ElementStyles {
         Array.isArray((document as any).adoptedStyleSheets) &&
         "replace" in CSSStyleSheet.prototype;
 }
+
+// Fallback strategy factories used when no strategy has been explicitly set
+// via ElementStyles.setDefaultStrategy (e.g. when importing only from the
+// styles.js subpath without loading element-controller.ts).
+
+function createAdoptedSheetsStrategy(): ConstructibleStyleStrategy {
+    const cache = new Map<string, CSSStyleSheet>();
+
+    return class FallbackAdoptedSheetsStrategy implements StyleStrategy {
+        private readonly sheets: CSSStyleSheet[];
+
+        constructor(styles: (string | CSSStyleSheet)[]) {
+            this.sheets = styles.map(x => {
+                if (x instanceof CSSStyleSheet) {
+                    return x;
+                }
+
+                let sheet = cache.get(x);
+
+                if (sheet === void 0) {
+                    sheet = new CSSStyleSheet();
+                    (sheet as any).replaceSync(x);
+                    cache.set(x, sheet);
+                }
+
+                return sheet;
+            });
+        }
+
+        addStylesTo(target: StyleTarget): void {
+            const t = target as Required<StyleTarget>;
+            t.adoptedStyleSheets = [...t.adoptedStyleSheets!, ...this.sheets];
+        }
+
+        removeStylesFrom(target: StyleTarget): void {
+            const t = target as Required<StyleTarget>;
+            t.adoptedStyleSheets = t.adoptedStyleSheets!.filter(
+                (x: CSSStyleSheet) => this.sheets.indexOf(x) === -1,
+            );
+        }
+    };
+}
+
+let fallbackStyleId = 0;
+
+function createStyleElementStrategy(): ConstructibleStyleStrategy {
+    return class FallbackStyleElementStrategy implements StyleStrategy {
+        private readonly styleClass: string;
+
+        constructor(private readonly styles: string[]) {
+            this.styleClass = `fast-${++fallbackStyleId}`;
+        }
+
+        addStylesTo(target: StyleTarget): void {
+            const t = target === (document as any) ? document.body : target;
+
+            for (let i = 0; i < this.styles.length; i++) {
+                const element = document.createElement("style");
+                element.innerHTML = this.styles[i];
+                element.className = this.styleClass;
+                (t as any).append(element);
+            }
+        }
+
+        removeStylesFrom(target: StyleTarget): void {
+            const t = target === (document as any) ? document.body : target;
+            const styles: NodeListOf<HTMLStyleElement> = (t as any).querySelectorAll(
+                `.${this.styleClass}`,
+            );
+
+            for (let i = 0, ii = styles.length; i < ii; ++i) {
+                (t as any).removeChild(styles[i]);
+            }
+        }
+    };
+}
diff --git a/packages/fast-element/src/templating/children.pw.spec.ts b/packages/fast-element/src/templating/children.pw.spec.ts
index ae6b5fb7494..96f66575118 100644
--- a/packages/fast-element/src/templating/children.pw.spec.ts
+++ b/packages/fast-element/src/templating/children.pw.spec.ts
@@ -53,7 +53,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -78,7 +78,7 @@ test.describe("The children", () => {
                 const nodesLength = model.nodes.length;
                 const childrenLength = children.length;
                 const allMatch = children.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
 
                 return { nodesLength, childrenLength, allMatch };
@@ -106,7 +106,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -133,7 +133,7 @@ test.describe("The children", () => {
                 const nodesLength = model.nodes.length;
                 const filteredLength = filtered.length;
                 const allMatch = filtered.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
 
                 return { nodesLength, filteredLength, allMatch };
@@ -161,7 +161,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -184,7 +184,7 @@ test.describe("The children", () => {
                 controller.bind(model);
 
                 const initialMatch = children.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const initialLength = model.nodes.length;
 
@@ -193,7 +193,7 @@ test.describe("The children", () => {
                 await Updates.next();
 
                 const updatedMatch = updatedChildren.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const updatedLength = model.nodes.length;
 
@@ -229,7 +229,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -254,7 +254,7 @@ test.describe("The children", () => {
 
                 const initialFiltered = children.filter(elements("foo-bar"));
                 const initialMatch = initialFiltered.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const initialLength = model.nodes.length;
 
@@ -264,7 +264,7 @@ test.describe("The children", () => {
 
                 const updatedFiltered = updatedChildren.filter(elements("foo-bar"));
                 const updatedMatch = updatedFiltered.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const updatedLength = model.nodes.length;
 
@@ -304,7 +304,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -320,7 +320,7 @@ test.describe("The children", () => {
                 const subtreeElement = "foo-bar-baz";
                 const subtreeChildren: HTMLElement[] = [];
 
-                for (let child of children) {
+                for (const child of children) {
                     for (let i = 0; i < 3; ++i) {
                         const subChild = document.createElement("foo-bar-baz");
                         subtreeChildren.push(subChild);
@@ -341,13 +341,13 @@ test.describe("The children", () => {
                 controller.bind(model);
 
                 const initialMatch = subtreeChildren.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const initialLength = model.nodes.length;
 
                 const newChildren = createAndAppendChildren(host);
 
-                for (let child of newChildren) {
+                for (const child of newChildren) {
                     for (let i = 0; i < 3; ++i) {
                         const subChild = document.createElement("foo-bar-baz");
                         subtreeChildren.push(subChild);
@@ -358,7 +358,7 @@ test.describe("The children", () => {
                 await Updates.next();
 
                 const updatedMatch = subtreeChildren.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const updatedLength = model.nodes.length;
 
@@ -396,7 +396,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -419,7 +419,7 @@ test.describe("The children", () => {
                 controller.bind(model);
 
                 const initialMatch = children.every(
-                    (c: any, i: number) => model.nodes[i] === c
+                    (c: any, i: number) => model.nodes[i] === c,
                 );
                 const initialLength = model.nodes.length;
 
@@ -498,7 +498,7 @@ test.describe("The children", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -534,7 +534,7 @@ test.describe("The children", () => {
                 const controller = Fake.viewController(
                     targets,
                     elementsDirective,
-                    textDirective
+                    textDirective,
                 );
 
                 controller.bind(model);
diff --git a/packages/fast-element/src/templating/html-binding-directive.ts b/packages/fast-element/src/templating/html-binding-directive.ts
index b640b33ff39..2166e6bca7d 100644
--- a/packages/fast-element/src/templating/html-binding-directive.ts
+++ b/packages/fast-element/src/templating/html-binding-directive.ts
@@ -17,7 +17,7 @@ import {
     type ViewController,
 } from "./html-directive.js";
 import { Markup } from "./markup.js";
-import { HydrationStage } from "./view.js";
+import { HydrationStage } from "./hydration-view.js";
 
 type UpdateTarget = (
     this: HTMLBindingDirective,
@@ -400,12 +400,7 @@ export class HTMLBindingDirective
                     break;
                 }
 
-                this.updateTarget!(
-                    target,
-                    this.targetAspect,
-                    value,
-                    controller,
-                );
+                this.updateTarget!(target, this.targetAspect, value, controller);
                 break;
             }
         }
diff --git a/packages/fast-element/src/templating/html-directive.ts b/packages/fast-element/src/templating/html-directive.ts
index 4be7372f5fa..4f544a66406 100644
--- a/packages/fast-element/src/templating/html-directive.ts
+++ b/packages/fast-element/src/templating/html-directive.ts
@@ -33,11 +33,16 @@ export interface ViewController<TSource = any, TParent = any>
     readonly _skipAttrUpdates?: boolean;
 
     /**
-     * A promise that resolves with `true` after prerendered content
-     * has been hydrated, or `false` when the view is client-side
-     * rendered.
+     * Resolves `true` when the view's host element had prerendered
+     * content (existing shadow root).
      */
     readonly isPrerendered?: Promise<boolean>;
+
+    /**
+     * Resolves `true` after prerendered content has been hydrated,
+     * `false` when client-side rendered or hydration not enabled.
+     */
+    readonly isHydrated?: Promise<boolean>;
 }
 
 /**
@@ -151,7 +156,7 @@ export interface PartialHTMLDirectiveDefinition {
  * @public
  */
 export interface HTMLDirectiveDefinition<
-    TType extends Constructable<HTMLDirective> = Constructable<HTMLDirective>
+    TType extends Constructable<HTMLDirective> = Constructable<HTMLDirective>,
 > extends Required<PartialHTMLDirectiveDefinition> {
     /**
      * The type that the definition provides metadata for.
@@ -185,7 +190,7 @@ export const HTMLDirective = Object.freeze({
      */
     define<TType extends Constructable<HTMLDirective>>(
         type: TType,
-        options?: PartialHTMLDirectiveDefinition
+        options?: PartialHTMLDirectiveDefinition,
     ): TType {
         options = options || {};
         (options as Mutable<HTMLDirectiveDefinition>).type = type;
diff --git a/packages/fast-element/src/templating/hydration-view.ts b/packages/fast-element/src/templating/hydration-view.ts
new file mode 100644
index 00000000000..e83c47f5909
--- /dev/null
+++ b/packages/fast-element/src/templating/hydration-view.ts
@@ -0,0 +1,337 @@
+import { Hydratable } from "../components/hydration.js";
+import {
+    buildViewBindingTargets,
+    createRangeForNodes,
+    HydrationTargetElementError,
+    targetFactory,
+    type ViewBehaviorBoundaries,
+} from "../hydration/target-builder.js";
+import {
+    type ExecutionContext,
+    Observable,
+    SourceLifetime,
+} from "../observation/observable.js";
+import { makeSerializationNoop } from "../platform.js";
+import type { ViewTemplate } from "../templating/template.js";
+import type {
+    CompiledViewBehaviorFactory,
+    ViewBehavior,
+    ViewBehaviorFactory,
+    ViewBehaviorTargets,
+    ViewController,
+} from "./html-directive.js";
+import {
+    DefaultExecutionContext,
+    type ElementView,
+    removeNodeSequence,
+    type SyntheticView,
+} from "./view.js";
+
+/** @public */
+export interface HydratableView<TSource = any, TParent = any>
+    extends ElementView,
+        SyntheticView,
+        DefaultExecutionContext<TParent> {
+    [Hydratable]: symbol;
+    readonly bindingViewBoundaries: Record<string, ViewNodes>;
+    readonly hydrationStage: keyof typeof HydrationStage;
+}
+
+export interface ViewNodes {
+    first: Node;
+    last: Node;
+}
+
+export const HydrationStage = {
+    unhydrated: "unhydrated",
+    hydrating: "hydrating",
+    hydrated: "hydrated",
+} as const;
+
+/** @public */
+export class HydrationBindingError extends Error {
+    constructor(
+        /**
+         * The error message
+         */
+        message: string | undefined,
+        /**
+         * The factory that was unable to be bound
+         */
+        public readonly factory: ViewBehaviorFactory,
+        /**
+         * A DocumentFragment containing a clone of the
+         * view's Nodes.
+         */
+        public readonly fragment: DocumentFragment,
+
+        /**
+         * String representation of the HTML in the template that
+         * threw the binding error.
+         */
+        public readonly templateString: string,
+    ) {
+        super(message);
+    }
+}
+
+export class HydrationView<TSource = any, TParent = any>
+    extends DefaultExecutionContext<TParent>
+    implements HydratableView
+{
+    [Hydratable] = Hydratable;
+    public context: ExecutionContext<any> = this;
+    public source: TSource | null = null;
+    public isBound = false;
+    public get hydrationStage() {
+        return this._hydrationStage;
+    }
+    public get targets() {
+        return this._targets;
+    }
+    public get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
+    public readonly sourceLifetime: SourceLifetime = SourceLifetime.unknown;
+    private unbindables: { unbind(controller: ViewController): void }[] = [];
+    private fragment: DocumentFragment | null = null;
+    private behaviors: ViewBehavior[] | null = null;
+    private factories: CompiledViewBehaviorFactory[];
+    private _hydrationStage: keyof typeof HydrationStage = HydrationStage.unhydrated;
+    private _bindingViewBoundaries: ViewBehaviorBoundaries = {};
+    private _targets: ViewBehaviorTargets = {};
+
+    constructor(
+        public readonly firstChild: Node,
+        public readonly lastChild: Node,
+        private sourceTemplate: ViewTemplate,
+        private hostBindingTarget?: Element,
+    ) {
+        super();
+        this.factories = sourceTemplate.compile().factories;
+    }
+
+    /**
+     * no-op. Hydrated views are don't need to be moved from a documentFragment
+     * to the target node.
+     */
+    public insertBefore(node: Node): void {
+        // No-op in cases where this is called before the view is removed,
+        // because the nodes will already be in the document and just need hydrating.
+        if (this.fragment === null) {
+            return;
+        }
+
+        if (this.fragment.hasChildNodes()) {
+            node.parentNode!.insertBefore(this.fragment, node);
+        } else {
+            const end = this.lastChild!;
+            if (node.previousSibling === end) return;
+
+            const parentNode = node.parentNode!;
+            let current = this.firstChild!;
+            let next;
+
+            while (current !== end) {
+                next = current.nextSibling;
+                parentNode.insertBefore(current, node);
+                current = next!;
+            }
+
+            parentNode.insertBefore(end, node);
+        }
+    }
+
+    /**
+     * Appends the view to a node. In cases where this is called before the
+     * view has been removed, the method will no-op.
+     * @param node - the node to append the view to.
+     */
+    public appendTo(node: Node): void {
+        if (this.fragment !== null) {
+            node.appendChild(this.fragment);
+        }
+    }
+
+    public remove(): void {
+        const fragment =
+            this.fragment || (this.fragment = document.createDocumentFragment());
+        const end = this.lastChild!;
+        let current = this.firstChild!;
+        let next;
+
+        while (current !== end) {
+            next = current.nextSibling;
+            if (!next) {
+                throw new Error(
+                    `Unmatched first/last child inside "${
+                        (end.getRootNode() as ShadowRoot).host.nodeName
+                    }".`,
+                );
+            }
+            fragment.appendChild(current);
+            current = next;
+        }
+
+        fragment.appendChild(end);
+    }
+
+    public bind(source: TSource, context: ExecutionContext<any> = this): void {
+        if (this.hydrationStage !== HydrationStage.hydrated) {
+            this._hydrationStage = HydrationStage.hydrating;
+        }
+
+        if (this.source === source) {
+            return;
+        }
+
+        let behaviors = this.behaviors;
+
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
+            try {
+                const { targets, boundaries } = buildViewBindingTargets(
+                    this.firstChild,
+                    this.lastChild,
+                    this.factories,
+                );
+                this._targets = targets;
+                this._bindingViewBoundaries = boundaries;
+            } catch (error) {
+                if (error instanceof HydrationTargetElementError) {
+                    let templateString = this.sourceTemplate.html;
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+                    error.templateString = templateString;
+                }
+                throw error;
+            }
+            this.behaviors = behaviors = new Array<ViewBehavior>(this.factories.length);
+            const factories = this.factories;
+
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const factory = factories[i];
+
+                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
+                    targetFactory(factory, this.hostBindingTarget, this._targets);
+                }
+
+                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
+                if (factory.targetNodeId in this.targets) {
+                    const behavior = factory.createBehavior();
+                    behavior.bind(this);
+                    behaviors[i] = behavior;
+                } else {
+                    let templateString = this.sourceTemplate.html;
+
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+
+                    const hostElement = (this.firstChild?.getRootNode() as ShadowRoot)
+                        .host;
+                    const hostName = hostElement?.nodeName || "unknown";
+                    const factoryInfo = factory as any;
+
+                    // Build detailed error message
+                    const details: string[] = [
+                        `HydrationView was unable to successfully target bindings inside "<${hostName.toLowerCase()}>".`,
+                        `\nMismatch Details:`,
+                        `  - Expected target node ID: "${factory.targetNodeId}"`,
+                        `  - Available target IDs: [${
+                            Object.keys(this.targets).join(", ") || "none"
+                        }]`,
+                    ];
+
+                    if (factory.targetTagName) {
+                        details.push(`  - Expected tag name: "${factory.targetTagName}"`);
+                    }
+
+                    if (factoryInfo.sourceAspect) {
+                        details.push(`  - Source aspect: "${factoryInfo.sourceAspect}"`);
+                    }
+
+                    if (factoryInfo.aspectType !== undefined) {
+                        details.push(`  - Aspect type: ${factoryInfo.aspectType}`);
+                    }
+
+                    details.push(
+                        `\nThis usually means:`,
+                        `  1. The server-rendered HTML doesn't match the client template`,
+                        `  2. The hydration markers are missing or corrupted`,
+                        `  3. The DOM structure was modified before hydration`,
+                        `\nTemplate: ${templateString.slice(0, 200)}${
+                            templateString.length > 200 ? "..." : ""
+                        }`,
+                    );
+
+                    throw new HydrationBindingError(
+                        details.join("\n"),
+                        factory,
+                        createRangeForNodes(
+                            this.firstChild,
+                            this.lastChild,
+                        ).cloneContents(),
+                        templateString,
+                    );
+                }
+            }
+        } else {
+            if (this.source !== null) {
+                this.evaluateUnbindables();
+            }
+
+            this.isBound = false;
+            this.source = source;
+            this.context = context;
+
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(this);
+            }
+        }
+
+        this.isBound = true;
+        this._hydrationStage = HydrationStage.hydrated;
+    }
+
+    public unbind(): void {
+        if (!this.isBound || this.source === null) {
+            return;
+        }
+
+        this.evaluateUnbindables();
+
+        this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+
+    /**
+     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+     * Once a view has been disposed, it cannot be inserted or bound again.
+     */
+    public dispose(): void {
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+
+    public onUnbind(behavior: {
+        unbind(controller: ViewController<TSource, TParent>): void;
+    }) {
+        this.unbindables.push(behavior);
+    }
+
+    private evaluateUnbindables() {
+        const unbindables = this.unbindables;
+
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+
+        unbindables.length = 0;
+    }
+}
+
+makeSerializationNoop(HydrationView);
diff --git a/packages/fast-element/src/templating/markup.ts b/packages/fast-element/src/templating/markup.ts
index 071b206292e..ffc5cfc4935 100644
--- a/packages/fast-element/src/templating/markup.ts
+++ b/packages/fast-element/src/templating/markup.ts
@@ -65,7 +65,7 @@ export const Parser = Object.freeze({
      */
     parse(
         value: string,
-        factories: Record<string, ViewBehaviorFactory>
+        factories: Record<string, ViewBehaviorFactory>,
     ): (string | ViewBehaviorFactory)[] | null {
         // Split on the interpolation start marker. If there's only one part,
         // no placeholders exist and we return null to signal "no directives here."
diff --git a/packages/fast-element/src/templating/node-observation.ts b/packages/fast-element/src/templating/node-observation.ts
index f36aa9b4b2e..f4e70ce1d68 100644
--- a/packages/fast-element/src/templating/node-observation.ts
+++ b/packages/fast-element/src/templating/node-observation.ts
@@ -50,7 +50,7 @@ export const elements = (selector?: string): ElementsFilter =>
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export abstract class NodeObservationDirective<
-    T extends NodeBehaviorOptions
+    T extends NodeBehaviorOptions,
 > extends StatelessAttachedAttributeDirective<T> {
     private _id: string;
     private _controllerProperty: string;
diff --git a/packages/fast-element/src/templating/render.ts b/packages/fast-element/src/templating/render.ts
index 4ec95415c24..d8a52720086 100644
--- a/packages/fast-element/src/templating/render.ts
+++ b/packages/fast-element/src/templating/render.ts
@@ -29,7 +29,7 @@ import {
     type TemplateValue,
     ViewTemplate,
 } from "./template.js";
-import { HydrationStage } from "./view.js";
+import { HydrationStage } from "./hydration-view.js";
 
 type ComposableView = ContentView & {
     isComposed?: boolean;
diff --git a/packages/fast-element/src/templating/repeat.pw.spec.ts b/packages/fast-element/src/templating/repeat.pw.spec.ts
index b18c547be8c..f717d610e0a 100644
--- a/packages/fast-element/src/templating/repeat.pw.spec.ts
+++ b/packages/fast-element/src/templating/repeat.pw.spec.ts
@@ -13,7 +13,7 @@ test.describe("The repeat", () => {
                     () => [],
                     html`
                         test
-                    `
+                    `,
                 );
                 return directive instanceof RepeatDirective;
             });
@@ -34,7 +34,7 @@ test.describe("The repeat", () => {
                     () => [],
                     html`
                         test
-                    `
+                    `,
                 );
                 return {
                     isInstance: directive instanceof RepeatDirective,
@@ -63,7 +63,7 @@ test.describe("The repeat", () => {
                     html`
                         test
                     `,
-                    { positioning: true }
+                    { positioning: true },
                 );
                 return {
                     isInstance: directive instanceof RepeatDirective,
@@ -92,7 +92,7 @@ test.describe("The repeat", () => {
                     html`
                         test
                     `,
-                    { recycle: false }
+                    { recycle: false },
                 );
                 return {
                     isInstance: directive instanceof RepeatDirective,
@@ -121,7 +121,7 @@ test.describe("The repeat", () => {
                     html`
                         test
                     `,
-                    { positioning: true, recycle: false }
+                    { positioning: true, recycle: false },
                 );
                 return {
                     isInstance: directive instanceof RepeatDirective,
@@ -154,12 +154,12 @@ test.describe("The repeat", () => {
                     x => x.items,
                     html`
                         test
-                    `
+                    `,
                 );
 
                 const data = directive.dataBinding.evaluate(
                     source,
-                    Fake.executionContext()
+                    Fake.executionContext(),
                 );
 
                 return data === source.items;
@@ -211,7 +211,7 @@ test.describe("The repeat", () => {
                 const directive = repeat(x => x.items, itemTemplate);
                 const template = directive.templateBinding.evaluate(
                     source,
-                    Fake.executionContext()
+                    Fake.executionContext(),
                 );
                 return template === itemTemplate;
             });
@@ -238,11 +238,11 @@ test.describe("The repeat", () => {
                 `;
                 const directive = repeat(
                     x => x.items,
-                    () => itemTemplate
+                    () => itemTemplate,
                 );
                 const template = directive.templateBinding.evaluate(
                     source,
-                    Fake.executionContext()
+                    Fake.executionContext(),
                 );
                 return template === itemTemplate;
             });
@@ -268,7 +268,7 @@ test.describe("The repeat", () => {
                     () => [],
                     html`
                         test
-                    `
+                    `,
                 );
                 directive.targetNodeId = nodeId;
 
@@ -314,7 +314,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -404,7 +404,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -519,7 +519,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -579,7 +579,7 @@ test.describe("The repeat", () => {
                             s,
                             undefined,
                             undefined,
-                            input => `<div>${input}</div>`
+                            input => `<div>${input}</div>`,
                         );
 
                     data.items = [];
@@ -598,7 +598,7 @@ test.describe("The repeat", () => {
                             s,
                             undefined,
                             undefined,
-                            input => `<div>${input}</div>`
+                            input => `<div>${input}</div>`,
                         );
 
                     return before && empty && after;
@@ -643,7 +643,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -839,7 +839,7 @@ test.describe("The repeat", () => {
                         constructor(sz) {
                             this.items = createRandomizedArray(
                                 sz,
-                                randomizedOneThroughTen
+                                randomizedOneThroughTen,
                             );
                         }
                     }
@@ -940,7 +940,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1044,7 +1044,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1147,7 +1147,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1249,7 +1249,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1368,7 +1368,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1432,7 +1432,7 @@ test.describe("The repeat", () => {
                             undefined,
                             undefined,
                             undefined,
-                            mid + 1
+                            mid + 1,
                         )}`
                     );
                 }, size);
@@ -1474,7 +1474,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1553,7 +1553,7 @@ test.describe("The repeat", () => {
                             undefined,
                             undefined,
                             undefined,
-                            mid + 1
+                            mid + 1,
                         )}`;
 
                     return posBefore && posAfter && htmlCorrect;
@@ -1598,7 +1598,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1662,7 +1662,7 @@ test.describe("The repeat", () => {
                             undefined,
                             undefined,
                             undefined,
-                            mid + 2
+                            mid + 2,
                         )}`
                     );
                 }, size);
@@ -1704,7 +1704,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1770,7 +1770,7 @@ test.describe("The repeat", () => {
                             undefined,
                             undefined,
                             undefined,
-                            mid + 2
+                            mid + 2,
                         )}`
                     );
                 }, size);
@@ -1812,7 +1812,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -1931,7 +1931,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2037,7 +2037,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2088,7 +2088,7 @@ test.describe("The repeat", () => {
                     const vm = new ViewModel(s);
                     const directive = repeat(
                         x => x.items,
-                        x => vm.template
+                        x => vm.template,
                     );
                     directive.targetNodeId = nodeId;
                     const behavior = directive.createBehavior();
@@ -2181,7 +2181,7 @@ test.describe("The repeat", () => {
                             html`
                                 child-${x => x.name}root-${(x, c) =>
                                     c.parentContext.parent.name}
-                            `
+                            `,
                         )}
                     `;
 
@@ -2242,7 +2242,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2346,7 +2346,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2450,7 +2450,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2555,7 +2555,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2659,7 +2659,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2763,7 +2763,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2864,7 +2864,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -2968,7 +2968,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -3073,7 +3073,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -3178,7 +3178,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
@@ -3245,7 +3245,7 @@ test.describe("The repeat", () => {
                             index => index !== 0,
                             undefined,
                             undefined,
-                            1
+                            1,
                         )}`
                     );
                 }, size);
@@ -3289,7 +3289,7 @@ test.describe("The repeat", () => {
                         filter = () => true,
                         prefix = "",
                         wrapper = input => input,
-                        fromIndex = 0
+                        fromIndex = 0,
                     ) {
                         let output = "";
                         const delta = fromIndex > 0 ? fromIndex : 0;
diff --git a/packages/fast-element/src/templating/repeat.ts b/packages/fast-element/src/templating/repeat.ts
index 013e6e17fe7..6c57c2def1e 100644
--- a/packages/fast-element/src/templating/repeat.ts
+++ b/packages/fast-element/src/templating/repeat.ts
@@ -24,9 +24,11 @@ import type {
     ViewTemplate,
 } from "./template.js";
 import {
-    HTMLView,
     HydrationStage,
     type HydrationView,
+} from "./hydration-view.js";
+import {
+    HTMLView,
     type SyntheticView,
 } from "./view.js";
 
diff --git a/packages/fast-element/src/templating/slotted.pw.spec.ts b/packages/fast-element/src/templating/slotted.pw.spec.ts
index 3af87a4bfb5..7675f26bb9d 100644
--- a/packages/fast-element/src/templating/slotted.pw.spec.ts
+++ b/packages/fast-element/src/templating/slotted.pw.spec.ts
@@ -55,7 +55,7 @@ test.describe("The slotted", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -121,7 +121,7 @@ test.describe("The slotted", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -191,7 +191,7 @@ test.describe("The slotted", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -264,7 +264,7 @@ test.describe("The slotted", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
@@ -342,7 +342,7 @@ test.describe("The slotted", () => {
                     const children = new Array(10);
                     for (let i = 0, ii = children.length; i < ii; ++i) {
                         const child = document.createElement(
-                            i % 1 === 0 ? elementName : "div"
+                            i % 1 === 0 ? elementName : "div",
                         );
                         children[i] = child;
                         host.appendChild(child);
diff --git a/packages/fast-element/src/templating/template.pw.spec.ts b/packages/fast-element/src/templating/template.pw.spec.ts
index eef9459202e..5160235173d 100644
--- a/packages/fast-element/src/templating/template.pw.spec.ts
+++ b/packages/fast-element/src/templating/template.pw.spec.ts
@@ -194,8 +194,8 @@ test.describe("The html tag template helper", () => {
                     },
                     // mixed back-to-back
                     {
-                        template: html`${stringValue}${numberValue}${
-                            x => x.value}${new TestDirective()} end`,
+                        template: html`${stringValue}${numberValue}${x =>
+                            x.value}${new TestDirective()} end`,
                         result: `${FAKE.interpolation}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment} end`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -204,9 +204,8 @@ test.describe("The html tag template helper", () => {
                         ],
                     },
                     {
-                        template: html`beginning ${stringValue}${numberValue}${
-                            x => x.value
-                        }${new TestDirective()} end`,
+                        template: html`beginning ${stringValue}${numberValue}${x =>
+                            x.value}${new TestDirective()} end`,
                         result: `beginning ${FAKE.interpolation}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment} end`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -215,9 +214,8 @@ test.describe("The html tag template helper", () => {
                         ],
                     },
                     {
-                        template: html`beginning ${stringValue}${numberValue}${
-                            x => x.value}${new TestDirective()
-                        }`,
+                        template: html`beginning ${stringValue}${numberValue}${x =>
+                            x.value}${new TestDirective()}`,
                         result: `beginning ${FAKE.interpolation}${FAKE.interpolation}${FAKE.interpolation}${FAKE.comment}`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -227,9 +225,8 @@ test.describe("The html tag template helper", () => {
                     },
                     // mixed separated
                     {
-                        template: html`${stringValue}separator${numberValue}separator${
-                            x => x.value
-                        }separator${new TestDirective()} end`,
+                        template: html`${stringValue}separator${numberValue}separator${x =>
+                            x.value}separator${new TestDirective()} end`,
                         result: `${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment} end`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -238,9 +235,8 @@ test.describe("The html tag template helper", () => {
                         ],
                     },
                     {
-                        template: html`beginning ${stringValue}separator${numberValue}separator${
-                            x => x.value
-                        }separator${new TestDirective()} end`,
+                        template: html`beginning ${stringValue}separator${numberValue}separator${x =>
+                            x.value}separator${new TestDirective()} end`,
                         result: `beginning ${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment} end`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -249,9 +245,8 @@ test.describe("The html tag template helper", () => {
                         ],
                     },
                     {
-                        template: html`beginning ${stringValue}separator${numberValue}separator${
-                            x => x.value
-                        }separator${new TestDirective()}`,
+                        template: html`beginning ${stringValue}separator${numberValue}separator${x =>
+                            x.value}separator${new TestDirective()}`,
                         result: `beginning ${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.interpolation}separator${FAKE.comment}`,
                         expectDirectives: [
                             HTMLBindingDirective,
@@ -273,15 +268,12 @@ test.describe("The html tag template helper", () => {
                         const result = parts.reduce(
                             (a, b) =>
                                 isString(b) ? a + b : a + Markup.interpolation("0"),
-                            ""
+                            "",
                         );
                         if (result !== expectedHTML)
                             return `html mismatch: got "${result}" expected "${expectedHTML}"`;
                     } else {
-                        if (
-                            template.html !==
-                            expectedHTML
-                        )
+                        if (template.html !== expectedHTML)
                             return `html mismatch: got "${template.html}" expected "${expectedHTML}"`;
                     }
 
@@ -310,10 +302,7 @@ test.describe("The html tag template helper", () => {
                                 }
                             }
 
-                            if (
-                                behaviorFactory.id !==
-                                id
-                            ) {
+                            if (behaviorFactory.id !== id) {
                                 return `id mismatch: expected "${id}", got "${behaviorFactory.id}"`;
                             }
                         }
@@ -354,7 +343,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -378,7 +367,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -422,7 +411,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -446,7 +435,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -491,7 +480,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -515,7 +504,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -565,7 +554,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -589,7 +578,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -637,7 +626,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -661,7 +650,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -705,7 +694,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -729,7 +718,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -775,7 +764,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -799,7 +788,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`
+                `<my-element ?some-attribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -844,7 +833,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -868,7 +857,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -912,7 +901,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -936,7 +925,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -983,7 +972,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -1007,7 +996,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -1059,7 +1048,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -1083,7 +1072,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -1135,7 +1124,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -1166,7 +1155,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`
+                `<my-element :someAttribute=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -1218,7 +1207,7 @@ test.describe("The html tag template helper", () => {
                 if (parts !== null) {
                     const result = parts.reduce(
                         (a, b) => (isString(b) ? a + b : a + Markup.interpolation("0")),
-                        ""
+                        "",
                     );
                     if (removeWhitespace(result) !== removeWhitespace(expectedHTML))
                         return `html mismatch: got "${result}" expected "${expectedHTML}"`;
@@ -1242,7 +1231,7 @@ test.describe("The html tag template helper", () => {
 
             const htmlErr = expectTemplateEquals(
                 template,
-                `<my-element @someEvent=${FAKE.interpolation}></my-element>`
+                `<my-element @someEvent=${FAKE.interpolation}></my-element>`,
             );
             if (htmlErr) return htmlErr;
 
@@ -1468,7 +1457,8 @@ test.describe("The ViewTemplate", () => {
             const nestedBehaviorPlaceholder = Markup.interpolation(nestedBehaviorId);
 
             const htmlMatch =
-                removeWhitespace(root.html) === `BeforeNested${nestedBehaviorPlaceholder}After`;
+                removeWhitespace(root.html) ===
+                `BeforeNested${nestedBehaviorPlaceholder}After`;
             const behaviorMatch = getFirstBehavior(root) === nestedBehavior;
 
             return htmlMatch && behaviorMatch;
@@ -1484,8 +1474,15 @@ test.describe("The ViewTemplate", () => {
 
         const result = await page.evaluate(async () => {
             // @ts-expect-error: Client module.
-            const { html, ViewTemplate, HTMLBindingDirective, Markup, nextId, oneWay, removeWhitespace } =
-                await import("/main.js");
+            const {
+                html,
+                ViewTemplate,
+                HTMLBindingDirective,
+                Markup,
+                nextId,
+                oneWay,
+                removeWhitespace,
+            } = await import("/main.js");
 
             function getFirstBehavior(template) {
                 for (const key in template.factories) {
@@ -1507,7 +1504,8 @@ test.describe("The ViewTemplate", () => {
             `;
 
             const htmlMatch =
-                removeWhitespace(root.html) === `BeforeNested${nestedBehaviorPlaceholder}After`;
+                removeWhitespace(root.html) ===
+                `BeforeNested${nestedBehaviorPlaceholder}After`;
             const behaviorMatch = getFirstBehavior(root) === nestedBehavior;
 
             return htmlMatch && behaviorMatch;
diff --git a/packages/fast-element/src/templating/view.pw.spec.ts b/packages/fast-element/src/templating/view.pw.spec.ts
index 50aa6e1c40d..6be54d1793b 100644
--- a/packages/fast-element/src/templating/view.pw.spec.ts
+++ b/packages/fast-element/src/templating/view.pw.spec.ts
@@ -375,7 +375,7 @@ test.describe("The HTMLView", () => {
                 const parentView = new HTMLView(
                     document.createDocumentFragment(),
                     [],
-                    {}
+                    {},
                 );
                 const parentContext = parentView.context;
                 const childView = new HTMLView(document.createDocumentFragment(), [], {});
@@ -405,7 +405,7 @@ test.describe("The HTMLView", () => {
                 const parentView = new HTMLView(
                     document.createDocumentFragment(),
                     [],
-                    {}
+                    {},
                 );
                 const parentContext = parentView.context;
                 const itemView = new HTMLView(document.createDocumentFragment(), [], {});
@@ -496,13 +496,13 @@ test.describe("The HTMLView", () => {
                         const parentView = new HTMLView(
                             document.createDocumentFragment(),
                             [],
-                            {}
+                            {},
                         );
                         const parentContext = parentView.context;
                         const itemView = new HTMLView(
                             document.createDocumentFragment(),
                             [],
-                            {}
+                            {},
                         );
                         const itemContext = itemView.context;
 
@@ -562,13 +562,13 @@ test.describe("The HTMLView", () => {
                     const parentView = new HTMLView(
                         document.createDocumentFragment(),
                         [],
-                        {}
+                        {},
                     );
                     const parentContext = parentView.context;
                     const itemView = new HTMLView(
                         document.createDocumentFragment(),
                         [],
-                        {}
+                        {},
                     );
                     const itemContext = itemView.context;
 
diff --git a/packages/fast-element/src/templating/view.ts b/packages/fast-element/src/templating/view.ts
index 80f1c5a5467..67c9a2e3776 100644
--- a/packages/fast-element/src/templating/view.ts
+++ b/packages/fast-element/src/templating/view.ts
@@ -1,11 +1,3 @@
-import { Hydratable } from "../components/hydration.js";
-import {
-    buildViewBindingTargets,
-    createRangeForNodes,
-    HydrationTargetElementError,
-    targetFactory,
-    type ViewBehaviorBoundaries,
-} from "../hydration/target-builder.js";
 import type { Disposable } from "../interfaces.js";
 import {
     ExecutionContext,
@@ -13,11 +5,9 @@ import {
     SourceLifetime,
 } from "../observation/observable.js";
 import { makeSerializationNoop } from "../platform.js";
-import type { ViewTemplate } from "../templating/template.js";
 import type {
     CompiledViewBehaviorFactory,
     ViewBehavior,
-    ViewBehaviorFactory,
     ViewBehaviorTargets,
     ViewController,
 } from "./html-directive.js";
@@ -107,7 +97,7 @@ export interface SyntheticView<TSource = any, TParent = any>
     remove(): void;
 }
 
-function removeNodeSequence(firstNode: Node, lastNode: Node): void {
+export function removeNodeSequence(firstNode: Node, lastNode: Node): void {
     const parent = firstNode.parentNode!;
     let current = firstNode;
     let next: ChildNode | null;
@@ -118,7 +108,7 @@ function removeNodeSequence(firstNode: Node, lastNode: Node): void {
             throw new Error(
                 `Unmatched first/last child inside "${
                     (lastNode.getRootNode() as ShadowRoot).host.nodeName
-                }".`
+                }".`,
             );
         }
         parent.removeChild(current);
@@ -128,7 +118,7 @@ function removeNodeSequence(firstNode: Node, lastNode: Node): void {
     parent.removeChild(lastNode);
 }
 
-class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> {
+export class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> {
     /**
      * The index of the current item within a repeat context.
      */
@@ -255,6 +245,12 @@ export class HTMLView<TSource = any, TParent = any>
      */
     public isPrerendered: Promise<boolean> = Promise.resolve(false);
 
+    /**
+     * Resolves `true` after prerendered content has been hydrated,
+     * `false` when client-side rendered or hydration not enabled.
+     */
+    public isHydrated: Promise<boolean> = Promise.resolve(false);
+
     /**
      * The execution context the view is running within.
      */
@@ -278,7 +274,7 @@ export class HTMLView<TSource = any, TParent = any>
     public constructor(
         private fragment: DocumentFragment,
         private factories: ReadonlyArray<CompiledViewBehaviorFactory>,
-        public readonly targets: ViewBehaviorTargets
+        public readonly targets: ViewBehaviorTargets,
     ) {
         super();
         this.firstChild = fragment.firstChild!;
@@ -449,312 +445,3 @@ export class HTMLView<TSource = any, TParent = any>
 makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
-
-/** @public */
-export interface HydratableView<TSource = any, TParent = any>
-    extends ElementView,
-        SyntheticView,
-        DefaultExecutionContext<TParent> {
-    [Hydratable]: symbol;
-    readonly bindingViewBoundaries: Record<string, ViewNodes>;
-    readonly hydrationStage: keyof typeof HydrationStage;
-}
-
-export interface ViewNodes {
-    first: Node;
-    last: Node;
-}
-
-export const HydrationStage = {
-    unhydrated: "unhydrated",
-    hydrating: "hydrating",
-    hydrated: "hydrated",
-} as const;
-
-/** @public */
-export class HydrationBindingError extends Error {
-    constructor(
-        /**
-         * The error message
-         */
-        message: string | undefined,
-        /**
-         * The factory that was unable to be bound
-         */
-        public readonly factory: ViewBehaviorFactory,
-        /**
-         * A DocumentFragment containing a clone of the
-         * view's Nodes.
-         */
-        public readonly fragment: DocumentFragment,
-
-        /**
-         * String representation of the HTML in the template that
-         * threw the binding error.
-         */
-        public readonly templateString: string
-    ) {
-        super(message);
-    }
-}
-
-export class HydrationView<TSource = any, TParent = any>
-    extends DefaultExecutionContext<TParent>
-    implements HydratableView
-{
-    [Hydratable] = Hydratable;
-    public context: ExecutionContext<any> = this;
-    public source: TSource | null = null;
-    public isBound = false;
-    public get hydrationStage() {
-        return this._hydrationStage;
-    }
-    public get targets() {
-        return this._targets;
-    }
-    public get bindingViewBoundaries() {
-        return this._bindingViewBoundaries;
-    }
-    public readonly sourceLifetime: SourceLifetime = SourceLifetime.unknown;
-    private unbindables: { unbind(controller: ViewController): void }[] = [];
-    private fragment: DocumentFragment | null = null;
-    private behaviors: ViewBehavior[] | null = null;
-    private factories: CompiledViewBehaviorFactory[];
-    private _hydrationStage: keyof typeof HydrationStage = HydrationStage.unhydrated;
-    private _bindingViewBoundaries: ViewBehaviorBoundaries = {};
-    private _targets: ViewBehaviorTargets = {};
-
-    constructor(
-        public readonly firstChild: Node,
-        public readonly lastChild: Node,
-        private sourceTemplate: ViewTemplate,
-        private hostBindingTarget?: Element
-    ) {
-        super();
-        this.factories = sourceTemplate.compile().factories;
-    }
-
-    /**
-     * no-op. Hydrated views are don't need to be moved from a documentFragment
-     * to the target node.
-     */
-    public insertBefore(node: Node): void {
-        // No-op in cases where this is called before the view is removed,
-        // because the nodes will already be in the document and just need hydrating.
-        if (this.fragment === null) {
-            return;
-        }
-
-        if (this.fragment.hasChildNodes()) {
-            node.parentNode!.insertBefore(this.fragment, node);
-        } else {
-            const end = this.lastChild!;
-            if (node.previousSibling === end) return;
-
-            const parentNode = node.parentNode!;
-            let current = this.firstChild!;
-            let next;
-
-            while (current !== end) {
-                next = current.nextSibling;
-                parentNode.insertBefore(current, node);
-                current = next!;
-            }
-
-            parentNode.insertBefore(end, node);
-        }
-    }
-
-    /**
-     * Appends the view to a node. In cases where this is called before the
-     * view has been removed, the method will no-op.
-     * @param node - the node to append the view to.
-     */
-    public appendTo(node: Node): void {
-        if (this.fragment !== null) {
-            node.appendChild(this.fragment);
-        }
-    }
-
-    public remove(): void {
-        const fragment =
-            this.fragment || (this.fragment = document.createDocumentFragment());
-        const end = this.lastChild!;
-        let current = this.firstChild!;
-        let next;
-
-        while (current !== end) {
-            next = current.nextSibling;
-            if (!next) {
-                throw new Error(
-                    `Unmatched first/last child inside "${
-                        (end.getRootNode() as ShadowRoot).host.nodeName
-                    }".`
-                );
-            }
-            fragment.appendChild(current);
-            current = next;
-        }
-
-        fragment.appendChild(end);
-    }
-
-    public bind(source: TSource, context: ExecutionContext<any> = this): void {
-        if (this.hydrationStage !== HydrationStage.hydrated) {
-            this._hydrationStage = HydrationStage.hydrating;
-        }
-
-        if (this.source === source) {
-            return;
-        }
-
-        let behaviors = this.behaviors;
-
-        if (behaviors === null) {
-            this.source = source;
-            this.context = context;
-            try {
-                const { targets, boundaries } = buildViewBindingTargets(
-                    this.firstChild,
-                    this.lastChild,
-                    this.factories
-                );
-                this._targets = targets;
-                this._bindingViewBoundaries = boundaries;
-            } catch (error) {
-                if (error instanceof HydrationTargetElementError) {
-                    let templateString = this.sourceTemplate.html;
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-                    error.templateString = templateString;
-                }
-                throw error;
-            }
-            this.behaviors = behaviors = new Array<ViewBehavior>(this.factories.length);
-            const factories = this.factories;
-
-            for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const factory = factories[i];
-
-                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
-                    targetFactory(factory, this.hostBindingTarget, this._targets);
-                }
-
-                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
-                if (factory.targetNodeId in this.targets) {
-                    const behavior = factory.createBehavior();
-                    behavior.bind(this);
-                    behaviors[i] = behavior;
-                } else {
-                    let templateString = this.sourceTemplate.html;
-
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-
-                    const hostElement = (this.firstChild?.getRootNode() as ShadowRoot)
-                        .host;
-                    const hostName = hostElement?.nodeName || "unknown";
-                    const factoryInfo = factory as any;
-
-                    // Build detailed error message
-                    const details: string[] = [
-                        `HydrationView was unable to successfully target bindings inside "<${hostName.toLowerCase()}>".`,
-                        `\nMismatch Details:`,
-                        `  - Expected target node ID: "${factory.targetNodeId}"`,
-                        `  - Available target IDs: [${
-                            Object.keys(this.targets).join(", ") || "none"
-                        }]`,
-                    ];
-
-                    if (factory.targetTagName) {
-                        details.push(`  - Expected tag name: "${factory.targetTagName}"`);
-                    }
-
-                    if (factoryInfo.sourceAspect) {
-                        details.push(`  - Source aspect: "${factoryInfo.sourceAspect}"`);
-                    }
-
-                    if (factoryInfo.aspectType !== undefined) {
-                        details.push(`  - Aspect type: ${factoryInfo.aspectType}`);
-                    }
-
-                    details.push(
-                        `\nThis usually means:`,
-                        `  1. The server-rendered HTML doesn't match the client template`,
-                        `  2. The hydration markers are missing or corrupted`,
-                        `  3. The DOM structure was modified before hydration`,
-                        `\nTemplate: ${templateString.slice(0, 200)}${
-                            templateString.length > 200 ? "..." : ""
-                        }`
-                    );
-
-                    throw new HydrationBindingError(
-                        details.join("\n"),
-                        factory,
-                        createRangeForNodes(
-                            this.firstChild,
-                            this.lastChild
-                        ).cloneContents(),
-                        templateString
-                    );
-                }
-            }
-        } else {
-            if (this.source !== null) {
-                this.evaluateUnbindables();
-            }
-
-            this.isBound = false;
-            this.source = source;
-            this.context = context;
-
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(this);
-            }
-        }
-
-        this.isBound = true;
-        this._hydrationStage = HydrationStage.hydrated;
-    }
-
-    public unbind(): void {
-        if (!this.isBound || this.source === null) {
-            return;
-        }
-
-        this.evaluateUnbindables();
-
-        this.source = null;
-        this.context = this;
-        this.isBound = false;
-    }
-
-    /**
-     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-     * Once a view has been disposed, it cannot be inserted or bound again.
-     */
-    public dispose(): void {
-        removeNodeSequence(this.firstChild, this.lastChild);
-        this.unbind();
-    }
-
-    public onUnbind(behavior: {
-        unbind(controller: ViewController<TSource, TParent>): void;
-    }) {
-        this.unbindables.push(behavior);
-    }
-
-    private evaluateUnbindables() {
-        const unbindables = this.unbindables;
-
-        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
-            unbindables[i].unbind(this);
-        }
-
-        unbindables.length = 0;
-    }
-}
-
-makeSerializationNoop(HydrationView);
diff --git a/packages/fast-element/src/templating/when.pw.spec.ts b/packages/fast-element/src/templating/when.pw.spec.ts
index 807ebab5c56..7aa7b76cb54 100644
--- a/packages/fast-element/src/templating/when.pw.spec.ts
+++ b/packages/fast-element/src/templating/when.pw.spec.ts
@@ -14,7 +14,7 @@ test.describe("The 'when' template function", () => {
                 () => true,
                 html`
                     test
-                `
+                `,
             );
             return typeof expression;
         });
@@ -154,7 +154,7 @@ test.describe("The 'when' template function", () => {
                 `;
                 const expression = when(
                     () => true,
-                    () => template
+                    () => template,
                 );
                 const r = expression(scope, Fake.executionContext());
                 return r === template;
diff --git a/packages/fast-element/src/testing/exports.ts b/packages/fast-element/src/testing/exports.ts
index 6c594c5b76d..567811b8dfa 100644
--- a/packages/fast-element/src/testing/exports.ts
+++ b/packages/fast-element/src/testing/exports.ts
@@ -1,3 +1,3 @@
-export { timeout } from "./timeout.js";
-export * from "./fixture.js";
 export * from "./fakes.js";
+export * from "./fixture.js";
+export { timeout } from "./timeout.js";
diff --git a/packages/fast-element/src/testing/fakes.ts b/packages/fast-element/src/testing/fakes.ts
index af3255bbd66..d28656423c2 100644
--- a/packages/fast-element/src/testing/fakes.ts
+++ b/packages/fast-element/src/testing/fakes.ts
@@ -9,7 +9,7 @@ import type {
 export const Fake = Object.freeze({
     executionContext<TParent = any>(
         parent?: TParent,
-        parentContext?: ExecutionContext<TParent>
+        parentContext?: ExecutionContext<TParent>,
     ): ExecutionContext<TParent> {
         return {
             /**
@@ -112,7 +112,7 @@ export const Fake = Object.freeze({
             toJSON: noop,
             bind(
                 source: TSource,
-                context: ExecutionContext<TParent> = Fake.executionContext()
+                context: ExecutionContext<TParent> = Fake.executionContext(),
             ) {
                 if (this.isBound) {
                     return;
diff --git a/packages/fast-element/src/testing/fixture.ts b/packages/fast-element/src/testing/fixture.ts
index 1cb8299858c..e1f9735c5d4 100644
--- a/packages/fast-element/src/testing/fixture.ts
+++ b/packages/fast-element/src/testing/fixture.ts
@@ -108,7 +108,7 @@ export function uniqueElementName(prefix: string = "fast-unique"): string {
  */
 export async function fixture<TElement = HTMLElement>(
     templateNameOrType: ViewTemplate | string | Constructable<TElement>,
-    options: FixtureOptions = {}
+    options: FixtureOptions = {},
 ): Promise<Fixture<TElement>> {
     const document = options.document || globalThis.document;
     const parent = options.parent || document.createElement("div");
diff --git a/packages/fast-element/src/utilities.ts b/packages/fast-element/src/utilities.ts
index 1abedffe26a..92cbcb4afae 100644
--- a/packages/fast-element/src/utilities.ts
+++ b/packages/fast-element/src/utilities.ts
@@ -76,7 +76,7 @@ export class UnobservableMutationObserver extends MutationObserver {
         function handler(mutations: MutationRecord[]) {
             this.callback.call(
                 null,
-                mutations.filter(record => this.observedNodes.has(record.target))
+                mutations.filter(record => this.observedNodes.has(record.target)),
             );
         }
 
@@ -138,7 +138,7 @@ export const ViewBehaviorOrchestrator = Object.freeze({
      * @returns A ViewBehaviorOrchestrator.
      */
     create<TSource = any, TParent = any>(
-        source: TSource
+        source: TSource,
     ): ViewBehaviorOrchestrator<TSource, TParent> {
         const behaviors: ViewBehavior[] = [];
         const targets: ViewBehaviorTargets = {};
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/declarative-no-hydration.spec.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/declarative-no-hydration.spec.ts
new file mode 100644
index 00000000000..f4886c2d9f5
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/declarative-no-hydration.spec.ts
@@ -0,0 +1,112 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Declarative Template Without Hydration", () => {
+    test("should render elements client-side when enableHydration is not called", async ({
+        page,
+    }) => {
+        const allDefined = page.waitForFunction(
+            () => (window as any).allDefined === true,
+        );
+        await page.goto("/fixtures/ecosystem/declarative-no-hydration/");
+        await allDefined;
+
+        const basicElement = page.locator("basic-element");
+        await expect(basicElement).toHaveText("Hi World");
+
+        const counterElement = page.locator("counter-element");
+        await expect(counterElement).toHaveText("Count: 0");
+    });
+
+    test("should fire template lifecycle callbacks without hydration", async ({
+        page,
+    }) => {
+        const allDefined = page.waitForFunction(
+            () => (window as any).allDefined === true,
+        );
+        await page.goto("/fixtures/ecosystem/declarative-no-hydration/");
+        await allDefined;
+
+        const events = await page.evaluate(() => (window as any).lifecycleEvents);
+
+        const basicEvents = events.filter((e: any) => e.name === "basic-element");
+        const counterEvents = events.filter((e: any) => e.name === "counter-element");
+
+        // Both elements should have all template lifecycle callbacks
+        for (const elementEvents of [basicEvents, counterEvents]) {
+            const callbacks = elementEvents.map((e: any) => e.callback);
+
+            expect(callbacks).toContain("elementDidRegister");
+            expect(callbacks).toContain("templateWillUpdate");
+            expect(callbacks).toContain("templateDidUpdate");
+            expect(callbacks).toContain("elementDidDefine");
+
+            // Verify ordering
+            const registerIdx = callbacks.indexOf("elementDidRegister");
+            const willUpdateIdx = callbacks.indexOf("templateWillUpdate");
+            const didUpdateIdx = callbacks.indexOf("templateDidUpdate");
+            const defineIdx = callbacks.indexOf("elementDidDefine");
+
+            expect(registerIdx).toBeLessThan(willUpdateIdx);
+            expect(willUpdateIdx).toBeLessThan(didUpdateIdx);
+            expect(didUpdateIdx).toBeLessThan(defineIdx);
+        }
+    });
+
+    test("should not fire hydration callbacks when enableHydration is not called", async ({
+        page,
+    }) => {
+        const allDefined = page.waitForFunction(
+            () => (window as any).allDefined === true,
+        );
+        await page.goto("/fixtures/ecosystem/declarative-no-hydration/");
+        await allDefined;
+
+        const events = await page.evaluate(() => (window as any).lifecycleEvents);
+
+        // No hydration callbacks should exist
+        const hydrationEvents = events.filter(
+            (e: any) =>
+                e.callback === "hydrationStarted" ||
+                e.callback === "hydrationComplete" ||
+                e.callback === "elementWillHydrate" ||
+                e.callback === "elementDidHydrate",
+        );
+
+        expect(hydrationEvents).toHaveLength(0);
+    });
+
+    test("isPrerendered should resolve true with DSD, isHydrated should resolve false without enableHydration", async ({
+        page,
+    }) => {
+        const allDefined = page.waitForFunction(
+            () => (window as any).allDefined === true,
+        );
+        await page.goto("/fixtures/ecosystem/declarative-no-hydration/");
+        await allDefined;
+
+        const result = await page.evaluate(async () => {
+            const el = document.querySelector("basic-element") as any;
+            return {
+                isPrerendered: await el.$fastController.isPrerendered,
+                isHydrated: await el.$fastController.isHydrated,
+            };
+        });
+
+        expect(result.isPrerendered).toBe(true);
+        expect(result.isHydrated).toBe(false);
+    });
+
+    test("should support interactivity after client-side render", async ({ page }) => {
+        const allDefined = page.waitForFunction(
+            () => (window as any).allDefined === true,
+        );
+        await page.goto("/fixtures/ecosystem/declarative-no-hydration/");
+        await allDefined;
+
+        const counterElement = page.locator("counter-element");
+        await expect(counterElement).toHaveText("Count: 0");
+
+        await counterElement.evaluate((el: any) => el.increment());
+        await expect(counterElement).toHaveText("Count: 1");
+    });
+});
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/entry.html b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/entry.html
new file mode 100644
index 00000000000..cec569621e5
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/entry.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Declarative Template Without Hydration</title>
+    </head>
+    <body>
+        <basic-element greeting="Hi"></basic-element>
+        <counter-element></counter-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/fast-build.config.json b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/fast-build.config.json
new file mode 100644
index 00000000000..c291972cdad
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/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/declarative-no-hydration/index.html b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/index.html
new file mode 100644
index 00000000000..3f1097ac335
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Declarative Template Without Hydration</title>
+    </head>
+    <body>
+        <basic-element greeting="Hi"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hi<!--fe:/b--> World</template></basic-element>
+        <counter-element><template shadowrootmode="open" shadowroot="open"><span>Count: <!--fe:b-->0<!--fe:/b--></span></template></counter-element>
+<f-template name="basic-element">
+    <template>{{greeting}} World</template>
+</f-template>
+
+<f-template name="counter-element">
+    <template><span>Count: {{count}}</span></template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/main.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/main.ts
new file mode 100644
index 00000000000..81ffe9c5cf0
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/main.ts
@@ -0,0 +1,66 @@
+import { attr, FASTElement, observable } from "@microsoft/fast-element";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+// No enableHydration() — test declarative template without hydration
+
+const lifecycleEvents: Array<{ callback: string; name?: string }> = [];
+
+class BasicElement extends FASTElement {
+    @attr
+    greeting: string = "Hello";
+}
+
+BasicElement.define({
+    name: "basic-element",
+    template: declarativeTemplate({
+        elementDidRegister(name: string) {
+            lifecycleEvents.push({ callback: "elementDidRegister", name });
+        },
+        templateWillUpdate(name: string) {
+            lifecycleEvents.push({ callback: "templateWillUpdate", name });
+        },
+        templateDidUpdate(name: string) {
+            lifecycleEvents.push({ callback: "templateDidUpdate", name });
+        },
+        elementDidDefine(name: string) {
+            lifecycleEvents.push({ callback: "elementDidDefine", name });
+            (window as any).elementsDefined = ((window as any).elementsDefined ?? 0) + 1;
+            if ((window as any).elementsDefined >= 2) {
+                (window as any).allDefined = true;
+            }
+        },
+    }),
+});
+
+class CounterElement extends FASTElement {
+    @observable
+    count: number = 0;
+
+    increment() {
+        this.count++;
+    }
+}
+
+CounterElement.define({
+    name: "counter-element",
+    template: declarativeTemplate({
+        elementDidRegister(name: string) {
+            lifecycleEvents.push({ callback: "elementDidRegister", name });
+        },
+        templateWillUpdate(name: string) {
+            lifecycleEvents.push({ callback: "templateWillUpdate", name });
+        },
+        templateDidUpdate(name: string) {
+            lifecycleEvents.push({ callback: "templateDidUpdate", name });
+        },
+        elementDidDefine(name: string) {
+            lifecycleEvents.push({ callback: "elementDidDefine", name });
+            (window as any).elementsDefined = ((window as any).elementsDefined ?? 0) + 1;
+            if ((window as any).elementsDefined >= 2) {
+                (window as any).allDefined = true;
+            }
+        },
+    }),
+});
+
+(window as any).lifecycleEvents = lifecycleEvents;
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/state.json b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/state.json
new file mode 100644
index 00000000000..001bfbf8598
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/state.json
@@ -0,0 +1,4 @@
+{
+    "greeting": "Hi",
+    "count": 0
+}
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/templates.html b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/templates.html
new file mode 100644
index 00000000000..9538e959678
--- /dev/null
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/declarative-no-hydration/templates.html
@@ -0,0 +1,7 @@
+<f-template name="basic-element">
+    <template>{{greeting}} World</template>
+</f-template>
+
+<f-template name="counter-element">
+    <template><span>Count: {{count}}</span></template>
+</f-template>
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/lifecycle-callbacks/main.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/lifecycle-callbacks/main.ts
index a6d2c5993ea..b0b2d0df6f8 100644
--- a/packages/fast-element/test/declarative/fixtures/ecosystem/lifecycle-callbacks/main.ts
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/lifecycle-callbacks/main.ts
@@ -1,14 +1,20 @@
 import { attr, FASTElement, observable } from "@microsoft/fast-element";
-import {
-    declarativeTemplate,
-    TemplateElement,
-} from "@microsoft/fast-element/declarative.js";
+import { declarativeTemplate, TemplateElement } from "@microsoft/fast-element/declarative.js";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
 
 // Track lifecycle callbacks for testing
 export const lifecycleEvents: Array<{ callback: string; name?: string }> = [];
 
-// Configure lifecycle callbacks
-TemplateElement.config({
+// Enable hydration with global callback
+enableHydration({
+    hydrationComplete(): void {
+        lifecycleEvents.push({ callback: "hydrationComplete" });
+        (window as any).hydrationCompleted = true;
+    },
+});
+
+// Per-element lifecycle callbacks
+const lifecycleCallbacks = {
     elementDidRegister(name: string): void {
         lifecycleEvents.push({ callback: "elementDidRegister", name });
     },
@@ -21,11 +27,7 @@ TemplateElement.config({
     elementDidDefine(name: string): void {
         lifecycleEvents.push({ callback: "elementDidDefine", name });
     },
-    hydrationComplete(): void {
-        lifecycleEvents.push({ callback: "hydrationComplete" });
-        (window as any).hydrationCompleted = true;
-    },
-});
+};
 
 // Simple element with basic property
 class SimpleElement extends FASTElement {
@@ -35,7 +37,7 @@ class SimpleElement extends FASTElement {
 
 SimpleElement.define({
     name: "simple-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 // Complex element with multiple properties and methods
@@ -60,7 +62,7 @@ class ComplexElement extends FASTElement {
 
 ComplexElement.define({
     name: "complex-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 // Nested element
@@ -71,7 +73,7 @@ class NestedElement extends FASTElement {
 
 NestedElement.define({
     name: "nested-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 // Element with deferred hydration
@@ -90,7 +92,7 @@ class DeferredElement extends FASTElement {
 
 DeferredElement.define({
     name: "deferred-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 // Nested deferred elements to verify parent-first hydration
@@ -105,7 +107,7 @@ class DeferredParentElement extends FASTElement {
 
 DeferredParentElement.define({
     name: "deferred-parent-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 class DeferredChildElement extends FASTElement {
@@ -119,7 +121,7 @@ class DeferredChildElement extends FASTElement {
 
 DeferredChildElement.define({
     name: "deferred-child-element",
-    template: declarativeTemplate(),
+    template: declarativeTemplate(lifecycleCallbacks),
 });
 
 // Define templates
diff --git a/packages/fast-element/test/declarative/fixtures/ecosystem/performance-metrics/main.ts b/packages/fast-element/test/declarative/fixtures/ecosystem/performance-metrics/main.ts
index 8862f84ee8d..a8584d1bec0 100644
--- a/packages/fast-element/test/declarative/fixtures/ecosystem/performance-metrics/main.ts
+++ b/packages/fast-element/test/declarative/fixtures/ecosystem/performance-metrics/main.ts
@@ -1,11 +1,20 @@
 import { attr, FASTElement, volatile } from "@microsoft/fast-element";
-import {
-    declarativeTemplate,
-    TemplateElement,
-} from "@microsoft/fast-element/declarative.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
 
 let markSequence = 0;
 
+// Enable hydration with global start/complete callbacks
+enableHydration({
+    hydrationStarted(): void {
+        performance.mark("hydration:started", { detail: { sequence: markSequence++ } });
+    },
+    hydrationComplete(): void {
+        performance.measure("hydration:complete", "hydration:started");
+        (window as any).hydrationCompleted = true;
+    },
+});
+
 class FastCard extends FASTElement {
     @attr({ attribute: "defer-delay" })
     deferDelay!: number;
@@ -18,38 +27,30 @@ class FastCard extends FASTElement {
 
 FastCard.define({
     name: "fast-card",
-    template: declarativeTemplate(),
-});
-
-TemplateElement.config({
-    hydrationStarted(): void {
-        performance.mark("hydration:started", { detail: { sequence: markSequence++ } });
-    },
-
-    templateWillUpdate(name: string) {
-        performance.mark(`template-update:${name}:start`, {
-            detail: { sequence: markSequence++ },
-        });
-    },
-
-    templateDidUpdate(name) {
-        performance.measure(`template-update:${name}`, `template-update:${name}:start`);
-    },
-
-    elementDidDefine(name) {
-        performance.mark(`element-define:${name}`, {
-            detail: { sequence: markSequence++ },
-        });
-    },
-
-    elementDidRegister(name) {
-        performance.mark(`element-register:${name}`, {
-            detail: { sequence: markSequence++ },
-        });
-    },
-
-    hydrationComplete(): void {
-        performance.measure("hydration:complete", "hydration:started");
-        (window as any).hydrationCompleted = true;
-    },
+    template: declarativeTemplate({
+        templateWillUpdate(name: string) {
+            performance.mark(`template-update:${name}:start`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+
+        templateDidUpdate(name) {
+            performance.measure(
+                `template-update:${name}`,
+                `template-update:${name}:start`,
+            );
+        },
+
+        elementDidDefine(name) {
+            performance.mark(`element-define:${name}`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+
+        elementDidRegister(name) {
+            performance.mark(`element-register:${name}`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+    }),
 });
diff --git a/packages/fast-element/test/declarative/index.html b/packages/fast-element/test/declarative/index.html
index 36afc6b921e..4bb8bf75ecb 100644
--- a/packages/fast-element/test/declarative/index.html
+++ b/packages/fast-element/test/declarative/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>FAST HTML Test Suite</title>
     </head>
     <body>
diff --git a/packages/fast-element/test/main.ts b/packages/fast-element/test/main.ts
index 4e70ac19fd3..fbb41ce6cd6 100644
--- a/packages/fast-element/test/main.ts
+++ b/packages/fast-element/test/main.ts
@@ -16,10 +16,13 @@ export type { FASTElementExtension } from "../src/components/fast-definitions.js
 export { FASTElementDefinition } from "../src/components/fast-definitions.js";
 export { customElement, FASTElement } from "../src/components/fast-element.js";
 export {
-    deferHydrationAttribute,
     HydrationMarkup,
     isHydratable,
 } from "../src/components/hydration.js";
+export {
+    deferHydrationAttribute,
+    enableHydration,
+} from "../src/components/enable-hydration.js";
 export { Context } from "../src/context.js";
 export {
     all,
diff --git a/packages/fast-element/test/tsconfig.json b/packages/fast-element/test/tsconfig.json
index b3feeb7a359..4709e0753ad 100644
--- a/packages/fast-element/test/tsconfig.json
+++ b/packages/fast-element/test/tsconfig.json
@@ -8,7 +8,10 @@
             "@microsoft/fast-element/declarative.js": ["../src/declarative.ts"],
             "@microsoft/fast-element/declarative/utilities.js": [
                 "../src/declarative/utilities.ts"
-            ]
+            ],
+            "@microsoft/fast-element/arrays.js": ["../src/arrays.ts"],
+            "@microsoft/fast-element/hydration.js": ["../src/hydration.ts"],
+            "@microsoft/fast-element/styles.js": ["../src/styles.ts"]
         }
     },
     "include": ["**/*.ts"]
diff --git a/packages/fast-router/docs/api-report.api.md b/packages/fast-router/docs/api-report.api.md
index 05ecabe2bc8..97870effcd1 100644
--- a/packages/fast-router/docs/api-report.api.md
+++ b/packages/fast-router/docs/api-report.api.md
@@ -5,7 +5,7 @@
 ```ts
 
 import { AddViewBehaviorFactory } from '@microsoft/fast-element';
-import { ComposableStyles } from '@microsoft/fast-element';
+import type { ComposableStyles } from '@microsoft/fast-element/styles.js';
 import { Constructable } from '@microsoft/fast-element';
 import { ExecutionContext } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
diff --git a/packages/fast-router/src/view.ts b/packages/fast-router/src/view.ts
index 80c48d890ec..c980ad225a5 100644
--- a/packages/fast-router/src/view.ts
+++ b/packages/fast-router/src/view.ts
@@ -1,10 +1,10 @@
 import {
-    ComposableStyles,
-    ElementStyles,
     ExecutionContext,
     html,
     ViewTemplate,
 } from "@microsoft/fast-element";
+import type { ComposableStyles } from "@microsoft/fast-element/styles.js";
+import { ElementStyles } from "@microsoft/fast-element/styles.js";
 import { isFASTElementHost, Router } from "./router.js";
 
 /**
diff --git a/sites/website/src/docs/3.x/advanced/working-with-custom-elements.md b/sites/website/src/docs/3.x/advanced/working-with-custom-elements.md
index 0cdec4a2c59..f21d6767e7b 100644
--- a/sites/website/src/docs/3.x/advanced/working-with-custom-elements.md
+++ b/sites/website/src/docs/3.x/advanced/working-with-custom-elements.md
@@ -66,7 +66,8 @@ const template = html<MyProgress>`
 
 **Example:**
 ```ts
-import { attr, css, FASTElement } from '@microsoft/fast-element';
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 class MyComponent extends FASTElement {
   private dynamicCSS = css`
@@ -99,7 +100,8 @@ class MyComponent extends FASTElement {
 For external signals such as [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia), keep the listener on the element and toggle a separate stylesheet through the same controller APIs. `css` templates stay static, so move runtime conditions into the element rather than binding them inside the stylesheet:
 
 ```ts
-import { css, FASTElement } from "@microsoft/fast-element";
+import { FASTElement } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 const darkStyles = css`
   :host {
diff --git a/sites/website/src/docs/3.x/advanced/working-without-decorators.md b/sites/website/src/docs/3.x/advanced/working-without-decorators.md
index d7f3a526109..013fbc04c61 100644
--- a/sites/website/src/docs/3.x/advanced/working-without-decorators.md
+++ b/sites/website/src/docs/3.x/advanced/working-without-decorators.md
@@ -17,7 +17,8 @@ Most of our documented examples include the use of TypeScript decorators. Howeve
 When defining your component, you may pass in attributes in the same configuration object as the name, template, and styles:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 export class MyElement extends FASTElement {
   // component logic
@@ -38,7 +39,8 @@ MyElement.define({
 This accepts the same configuration options as the `@attr` so for example to bind a property name that is different from an attribute name:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 export class MyElement extends FASTElement {
   constructor() {
@@ -71,7 +73,8 @@ In the above example we are setting the `currentCount` in the constructor and no
 If you need to add a converter to your attribute:
 
 ```javascript
-import { FASTElement, html, css } from '@microsoft/fast-element';
+import { FASTElement, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 const converter = {
   toView: (value) => {
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsort.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsort.md
deleted file mode 100644
index 4f3bdac674f..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsort.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: "fast-element.arrayobserver.addsort"
-title: "ArrayObserver.addSort() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.addsort"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.addSort() method"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.addsort"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [addSort](../fast-element.arrayobserver.addsort/index.html)
-
-## ArrayObserver.addSort() method
-
-Adds a sort to the list of changes.
-
-**Signature:**
-
-```typescript
-addSort(sort: Sort): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-sort
-
-
-</td><td>
-
-[Sort](../fast-element.sort/)
-
-
-</td><td>
-
-The sort to add.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsplice.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsplice.md
deleted file mode 100644
index 46260aeaa8f..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.addsplice.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: "fast-element.arrayobserver.addsplice"
-title: "ArrayObserver.addSplice() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.addsplice"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.addSplice() method"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.addsplice"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [addSplice](../fast-element.arrayobserver.addsplice/index.html)
-
-## ArrayObserver.addSplice() method
-
-Adds a splice to the list of changes.
-
-**Signature:**
-
-```typescript
-addSplice(splice: Splice): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-splice
-
-
-</td><td>
-
-[Splice](../fast-element.splice/)
-
-
-</td><td>
-
-The splice to add.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.flush.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.flush.md
deleted file mode 100644
index abf8f31261f..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.flush.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.arrayobserver.flush"
-title: "ArrayObserver.flush() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.flush"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.flush() method"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.flush"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [flush](../fast-element.arrayobserver.flush/index.html)
-
-## ArrayObserver.flush() method
-
-Flushes the changes to subscribers.
-
-**Signature:**
-
-```typescript
-flush(): void;
-```
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.lengthobserver.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.lengthobserver.md
deleted file mode 100644
index a2ee10309fc..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.lengthobserver.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.arrayobserver.lengthobserver"
-title: "ArrayObserver.lengthObserver property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.lengthobserver"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.lengthObserver property"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.lengthobserver"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [lengthObserver](../fast-element.arrayobserver.lengthobserver/index.html)
-
-## ArrayObserver.lengthObserver property
-
-The length observer for the array.
-
-**Signature:**
-
-```typescript
-readonly lengthObserver: LengthObserver;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.md
deleted file mode 100644
index d82efe25280..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.arrayobserver"
-title: "ArrayObserver variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver"
-  parent: "api3xfast-element"
-  title: "ArrayObserver variable"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html)
-
-## ArrayObserver variable
-
-An observer for arrays.
-
-**Signature:**
-
-```typescript
-ArrayObserver: Readonly<{
-    readonly sorted: 0;
-    readonly enable: () => void;
-}>
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.reset.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.reset.md
deleted file mode 100644
index b7507c7a2d7..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.reset.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: "fast-element.arrayobserver.reset"
-title: "ArrayObserver.reset() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.reset"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.reset() method"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.reset"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [reset](../fast-element.arrayobserver.reset/index.html)
-
-## ArrayObserver.reset() method
-
-Indicates that a reset change has occurred.
-
-**Signature:**
-
-```typescript
-reset(oldCollection: any[] | undefined): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-oldCollection
-
-
-</td><td>
-
-any\[\] \| undefined
-
-
-</td><td>
-
-The collection as it was before the reset.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.sortobserver.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.sortobserver.md
deleted file mode 100644
index 8359c6d5bef..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.sortobserver.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.arrayobserver.sortobserver"
-title: "ArrayObserver.sortObserver property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.sortobserver"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.sortObserver property"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.sortobserver"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [sortObserver](../fast-element.arrayobserver.sortobserver/index.html)
-
-## ArrayObserver.sortObserver property
-
-The sort observer for the array.
-
-**Signature:**
-
-```typescript
-readonly sortObserver: SortObserver;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.strategy.md b/sites/website/src/docs/3.x/api/fast-element.arrayobserver.strategy.md
deleted file mode 100644
index 9b24cad0c31..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.arrayobserver.strategy.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.arrayobserver.strategy"
-title: "ArrayObserver.strategy property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.arrayobserver.strategy"
-  parent: "api3xfast-element"
-  title: "ArrayObserver.strategy property"
-navigationOptions:
-  activeKey: "api3xfast-element.arrayobserver.strategy"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ArrayObserver](../fast-element.arrayobserver/index.html) &gt; [strategy](../fast-element.arrayobserver.strategy/index.html)
-
-## ArrayObserver.strategy property
-
-The strategy to use for tracking changes.
-
-**Signature:**
-
-```typescript
-strategy: SpliceStrategy | null;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.css.md b/sites/website/src/docs/3.x/api/fast-element.css.md
deleted file mode 100644
index 05c0fef877a..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.css.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-id: "fast-element.css"
-title: "css variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.css"
-  parent: "api3xfast-element"
-  title: "css variable"
-navigationOptions:
-  activeKey: "api3xfast-element.css"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [css](../fast-element.css/index.html)
-
-## css variable
-
-Transforms a template literal string into styles.
-
-**Signature:**
-
-```typescript
-css: CSSTemplateTag
-```
-
-## Remarks
-
-The css helper supports interpolation of static composable styles and CSS directives.
diff --git a/sites/website/src/docs/3.x/api/fast-element.cssdirective.createcss.md b/sites/website/src/docs/3.x/api/fast-element.cssdirective.createcss.md
deleted file mode 100644
index 376fbc38b9d..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.cssdirective.createcss.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-id: "fast-element.cssdirective.createcss"
-title: "CSSDirective.createCSS() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.cssdirective.createcss"
-  parent: "api3xfast-element"
-  title: "CSSDirective.createCSS() method"
-navigationOptions:
-  activeKey: "api3xfast-element.cssdirective.createcss"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSDirective](../fast-element.cssdirective/index.html) &gt; [createCSS](../fast-element.cssdirective.createcss/index.html)
-
-## CSSDirective.createCSS() method
-
-Creates static styles to interpolate into the CSS document.
-
-**Signature:**
-
-```typescript
-createCSS(): ComposableStyles;
-```
-**Returns:**
-
-[ComposableStyles](../fast-element.composablestyles/)
-
-- the styles to interpolate into CSS
diff --git a/sites/website/src/docs/3.x/api/fast-element.cssdirective.md b/sites/website/src/docs/3.x/api/fast-element.cssdirective.md
deleted file mode 100644
index d0b2382eed8..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.cssdirective.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-id: "fast-element.cssdirective"
-title: "CSSDirective variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.cssdirective"
-  parent: "api3xfast-element"
-  title: "CSSDirective variable"
-navigationOptions:
-  activeKey: "api3xfast-element.cssdirective"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSDirective](../fast-element.cssdirective/index.html)
-
-## CSSDirective variable
-
-Instructs the css engine to provide styles during CSS template composition.
-
-**Signature:**
-
-```typescript
-CSSDirective: Readonly<{
-    getForInstance: (object: any) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
-    getByType: (key: Function) => CSSDirectiveDefinition<Constructable<CSSDirective>> | undefined;
-    define<TType extends Constructable<CSSDirective>>(type: any): TType;
-}>
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.md b/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.md
deleted file mode 100644
index ac09097f27c..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-id: "fast-element.cssdirectivedefinition"
-title: "CSSDirectiveDefinition interface"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.cssdirectivedefinition"
-  parent: "api3xfast-element"
-  title: "CSSDirectiveDefinition interface"
-navigationOptions:
-  activeKey: "api3xfast-element.cssdirectivedefinition"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSDirectiveDefinition](../fast-element.cssdirectivedefinition/index.html)
-
-## CSSDirectiveDefinition interface
-
-Defines metadata for a CSSDirective.
-
-**Signature:**
-
-```typescript
-export interface CSSDirectiveDefinition<TType extends Constructable<CSSDirective> = Constructable<CSSDirective>> 
-```
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[type](../fast-element.cssdirectivedefinition.type/)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-TType
-
-
-</td><td>
-
-The type that the definition provides metadata for.
-
-
-</td></tr>
-</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.type.md b/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.type.md
deleted file mode 100644
index decc9e73063..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.cssdirectivedefinition.type.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.cssdirectivedefinition.type"
-title: "CSSDirectiveDefinition.type property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.cssdirectivedefinition.type"
-  parent: "api3xfast-element"
-  title: "CSSDirectiveDefinition.type property"
-navigationOptions:
-  activeKey: "api3xfast-element.cssdirectivedefinition.type"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSDirectiveDefinition](../fast-element.cssdirectivedefinition/index.html) &gt; [type](../fast-element.cssdirectivedefinition.type/index.html)
-
-## CSSDirectiveDefinition.type property
-
-The type that the definition provides metadata for.
-
-**Signature:**
-
-```typescript
-readonly type: TType;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.csstemplatetag.md b/sites/website/src/docs/3.x/api/fast-element.csstemplatetag.md
deleted file mode 100644
index a1746bbb4f3..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.csstemplatetag.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-id: "fast-element.csstemplatetag"
-title: "CSSTemplateTag type"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.csstemplatetag"
-  parent: "api3xfast-element"
-  title: "CSSTemplateTag type"
-navigationOptions:
-  activeKey: "api3xfast-element.csstemplatetag"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSTemplateTag](../fast-element.csstemplatetag/index.html)
-
-## CSSTemplateTag type
-
-Transforms a template literal string into styles.
-
-**Signature:**
-
-```typescript
-export type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: CSSValue[]) => ElementStyles) & {
-    partial(strings: TemplateStringsArray, ...values: CSSValue[]): CSSDirective;
-};
-```
-**References:** [CSSValue](../fast-element.cssvalue/)<!-- -->, [ElementStyles](../fast-element.elementstyles/)<!-- -->, [CSSDirective](../fast-element.cssdirective/)
-
-## Remarks
-
-The css helper supports interpolation of static composable styles and CSS directives. Use the .partial method to create partial CSS fragments.
diff --git a/sites/website/src/docs/3.x/api/fast-element.cssvalue.md b/sites/website/src/docs/3.x/api/fast-element.cssvalue.md
deleted file mode 100644
index 2db18999e99..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.cssvalue.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-id: "fast-element.cssvalue"
-title: "CSSValue type"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.cssvalue"
-  parent: "api3xfast-element"
-  title: "CSSValue type"
-navigationOptions:
-  activeKey: "api3xfast-element.cssvalue"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [CSSValue](../fast-element.cssvalue/index.html)
-
-## CSSValue type
-
-Represents the types of values that can be interpolated into a template.
-
-**Signature:**
-
-```typescript
-export type CSSValue = ComposableStyles | CSSDirective;
-```
-**References:** [ComposableStyles](../fast-element.composablestyles/)<!-- -->, [CSSDirective](../fast-element.cssdirective/)
diff --git a/sites/website/src/docs/3.x/api/fast-element.deferhydrationattribute.md b/sites/website/src/docs/3.x/api/fast-element.deferhydrationattribute.md
deleted file mode 100644
index 557430f051a..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.deferhydrationattribute.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.deferhydrationattribute"
-title: "deferHydrationAttribute variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.deferhydrationattribute"
-  parent: "api3xfast-element"
-  title: "deferHydrationAttribute variable"
-navigationOptions:
-  activeKey: "api3xfast-element.deferhydrationattribute"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [deferHydrationAttribute](../fast-element.deferhydrationattribute/index.html)
-
-## deferHydrationAttribute variable
-
-> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
-> 
-
-The attribute used to defer hydration of an element.
-
-**Signature:**
-
-```typescript
-deferHydrationAttribute = "defer-hydration"
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.confighydration.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.confighydration.md
deleted file mode 100644
index 0f0a41cd05e..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.confighydration.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: "fast-element.elementcontroller.confighydration"
-title: "ElementController.configHydration() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementcontroller.confighydration"
-  parent: "api3xfast-element"
-  title: "ElementController.configHydration() method"
-navigationOptions:
-  activeKey: "api3xfast-element.elementcontroller.confighydration"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [configHydration](../fast-element.elementcontroller.confighydration/index.html)
-
-## ElementController.configHydration() method
-
-Configure lifecycle callbacks for element hydration tracking.
-
-**Signature:**
-
-```typescript
-static configHydration(callbacks: ElementHydrationCallbacks): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-callbacks
-
-
-</td><td>
-
-[ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/)
-
-
-</td><td>
-
-Lifecycle callbacks to configure.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.ishydrated.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.ishydrated.md
new file mode 100644
index 00000000000..e193f31f7d2
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.ishydrated.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.elementcontroller.ishydrated"
+title: "ElementController.isHydrated property"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.elementcontroller.ishydrated"
+  parent: "api3xfast-element"
+  title: "ElementController.isHydrated property"
+navigationOptions:
+  activeKey: "api3xfast-element.elementcontroller.ishydrated"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [isHydrated](../fast-element.elementcontroller.ishydrated/index.html)
+
+## ElementController.isHydrated property
+
+Resolves `true` after prerendered content has been successfully hydrated, or `false` when the component is client-side rendered or hydration is not enabled.
+
+**Signature:**
+
+```typescript
+readonly isHydrated: Promise<boolean>;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.isprerendered.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.isprerendered.md
index 92b9f80d565..dcc28accb8b 100644
--- a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.isprerendered.md
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.isprerendered.md
@@ -15,18 +15,7 @@ navigationOptions:
 
 ## ElementController.isPrerendered property
 
-A promise that resolves with `true` after prerendered content has been hydrated, or `false` immediately when the component is client-side rendered. Component authors can await this to know when the element is fully interactive:
-
-```typescript
-connectedCallback() {
-    super.connectedCallback();
-    this.$fastController.isPrerendered.then(prerendered => {
-        if (!prerendered) {
-            this.fetchData();
-        }
-    });
-}
-```
+Resolves `true` when the element had an existing shadow root (from SSR or declarative shadow DOM) at connect time, `false` otherwise.
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.md
index 28a75adfe9e..1778d88d6a2 100644
--- a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.md
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.md
@@ -20,11 +20,9 @@ Controls the lifecycle and rendering of a `FASTElement`<!-- -->.
 **Signature:**
 
 ```typescript
-export declare class ElementController<TElement extends HTMLElement = HTMLElement> extends PropertyChangeNotifier implements HostController<TElement> 
+export declare class ElementController<TElement extends HTMLElement = HTMLElement> implements Notifier, HostController<TElement> 
 ```
-**Extends:** [PropertyChangeNotifier](../fast-element.propertychangenotifier/)
-
-**Implements:** [HostController](../fast-element.hostcontroller/)<!-- -->&lt;TElement&gt;
+**Implements:** [Notifier](../fast-element.notifier/)<!-- -->, [HostController](../fast-element.hostcontroller/)<!-- -->&lt;TElement&gt;
 
 ## Remarks
 
@@ -181,7 +179,7 @@ Indicates whether or not the custom element has been connected to the document.
 </td></tr>
 <tr><td>
 
-[isPrerendered](../fast-element.elementcontroller.isprerendered/)
+[isHydrated](../fast-element.elementcontroller.ishydrated/)
 
 
 </td><td>
@@ -196,18 +194,28 @@ Promise&lt;boolean&gt;
 
 </td><td>
 
-A promise that resolves with `true` after prerendered content has been hydrated, or `false` immediately when the component is client-side rendered. Component authors can await this to know when the element is fully interactive:
+Resolves `true` after prerendered content has been successfully hydrated, or `false` when the component is client-side rendered or hydration is not enabled.
 
-```typescript
-connectedCallback() {
-    super.connectedCallback();
-    this.$fastController.isPrerendered.then(prerendered => {
-        if (!prerendered) {
-            this.fetchData();
-        }
-    });
-}
-```
+
+</td></tr>
+<tr><td>
+
+[isPrerendered](../fast-element.elementcontroller.isprerendered/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+Promise&lt;boolean&gt;
+
+
+</td><td>
+
+Resolves `true` when the element had an existing shadow root (from SSR or declarative shadow DOM) at connect time, `false` otherwise.
 
 
 </td></tr>
@@ -332,6 +340,27 @@ Indicates how the source's lifetime relates to the controller's lifetime.
 The current lifecycle stage of the controller.
 
 
+</td></tr>
+<tr><td>
+
+[subject](../fast-element.elementcontroller.subject/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+TElement
+
+
+</td><td>
+
+The subject that subscribers will receive notifications for.
+
+
 </td></tr>
 <tr><td>
 
@@ -452,22 +481,6 @@ Binds any observables that were set before upgrade.
 Captures own-properties that shadow observable accessors on the prototype so they can be rebound through the accessor before rendering.
 
 
-</td></tr>
-<tr><td>
-
-[configHydration(callbacks)](../fast-element.elementcontroller.confighydration/)
-
-
-</td><td>
-
-`static`
-
-
-</td><td>
-
-Configure lifecycle callbacks for element hydration tracking.
-
-
 </td></tr>
 <tr><td>
 
@@ -558,6 +571,20 @@ Emits a custom HTML event.
 Locates or creates a controller for the specified element.
 
 
+</td></tr>
+<tr><td>
+
+[notify(args)](../fast-element.elementcontroller.notify/)
+
+
+</td><td>
+
+
+</td><td>
+
+Notifies all subscribers of a property change.
+
+
 </td></tr>
 <tr><td>
 
@@ -662,6 +689,20 @@ Renders the provided template to the element.
 Sets the strategy that ElementController.forCustomElement uses to construct ElementController instances for an element.
 
 
+</td></tr>
+<tr><td>
+
+[subscribe(subscriber, propertyToWatch)](../fast-element.elementcontroller.subscribe/)
+
+
+</td><td>
+
+
+</td><td>
+
+Subscribes to notification of changes in the element's state.
+
+
 </td></tr>
 <tr><td>
 
@@ -678,5 +719,19 @@ Sets the strategy that ElementController.forCustomElement uses to construct Elem
 Synchronizes late-defined attribute-map attributes from the live DOM to the associated property values before the initial render occurs.
 
 
+</td></tr>
+<tr><td>
+
+[unsubscribe(subscriber, propertyToUnwatch)](../fast-element.elementcontroller.unsubscribe/)
+
+
+</td><td>
+
+
+</td><td>
+
+Unsubscribes from notification of changes in the element's state.
+
+
 </td></tr>
 </tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.notify.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.notify.md
new file mode 100644
index 00000000000..404ccbfdaf6
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.notify.md
@@ -0,0 +1,64 @@
+---
+id: "fast-element.elementcontroller.notify"
+title: "ElementController.notify() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.elementcontroller.notify"
+  parent: "api3xfast-element"
+  title: "ElementController.notify() method"
+navigationOptions:
+  activeKey: "api3xfast-element.elementcontroller.notify"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [notify](../fast-element.elementcontroller.notify/index.html)
+
+## ElementController.notify() method
+
+Notifies all subscribers of a property change.
+
+**Signature:**
+
+```typescript
+notify(args: any): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+args
+
+
+</td><td>
+
+any
+
+
+</td><td>
+
+The property name that changed.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subject.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subject.md
new file mode 100644
index 00000000000..08d330a4896
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subject.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.elementcontroller.subject"
+title: "ElementController.subject property"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.elementcontroller.subject"
+  parent: "api3xfast-element"
+  title: "ElementController.subject property"
+navigationOptions:
+  activeKey: "api3xfast-element.elementcontroller.subject"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [subject](../fast-element.elementcontroller.subject/index.html)
+
+## ElementController.subject property
+
+The subject that subscribers will receive notifications for.
+
+**Signature:**
+
+```typescript
+get subject(): TElement;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subscribe.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subscribe.md
new file mode 100644
index 00000000000..cedd10c5289
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.subscribe.md
@@ -0,0 +1,80 @@
+---
+id: "fast-element.elementcontroller.subscribe"
+title: "ElementController.subscribe() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.elementcontroller.subscribe"
+  parent: "api3xfast-element"
+  title: "ElementController.subscribe() method"
+navigationOptions:
+  activeKey: "api3xfast-element.elementcontroller.subscribe"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [subscribe](../fast-element.elementcontroller.subscribe/index.html)
+
+## ElementController.subscribe() method
+
+Subscribes to notification of changes in the element's state.
+
+**Signature:**
+
+```typescript
+subscribe(subscriber: Subscriber, propertyToWatch?: any): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+subscriber
+
+
+</td><td>
+
+[Subscriber](../fast-element.subscriber/)
+
+
+</td><td>
+
+The object that is subscribing for change notification.
+
+
+</td></tr>
+<tr><td>
+
+propertyToWatch
+
+
+</td><td>
+
+any
+
+
+</td><td>
+
+_(Optional)_ The name of the property to watch for changes.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementcontroller.unsubscribe.md b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.unsubscribe.md
new file mode 100644
index 00000000000..c132c603763
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.elementcontroller.unsubscribe.md
@@ -0,0 +1,80 @@
+---
+id: "fast-element.elementcontroller.unsubscribe"
+title: "ElementController.unsubscribe() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.elementcontroller.unsubscribe"
+  parent: "api3xfast-element"
+  title: "ElementController.unsubscribe() method"
+navigationOptions:
+  activeKey: "api3xfast-element.elementcontroller.unsubscribe"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementController](../fast-element.elementcontroller/index.html) &gt; [unsubscribe](../fast-element.elementcontroller.unsubscribe/index.html)
+
+## ElementController.unsubscribe() method
+
+Unsubscribes from notification of changes in the element's state.
+
+**Signature:**
+
+```typescript
+unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+subscriber
+
+
+</td><td>
+
+[Subscriber](../fast-element.subscriber/)
+
+
+</td><td>
+
+The object that is unsubscribing from change notification.
+
+
+</td></tr>
+<tr><td>
+
+propertyToUnwatch
+
+
+</td><td>
+
+any
+
+
+</td><td>
+
+_(Optional)_ The name of the property to unsubscribe from.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementdidhydrate.md b/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementdidhydrate.md
deleted file mode 100644
index eadd58eee5f..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementdidhydrate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.elementhydrationcallbacks.elementdidhydrate"
-title: "ElementHydrationCallbacks.elementDidHydrate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementhydrationcallbacks.elementdidhydrate"
-  parent: "api3xfast-element"
-  title: "ElementHydrationCallbacks.elementDidHydrate() method"
-navigationOptions:
-  activeKey: "api3xfast-element.elementhydrationcallbacks.elementdidhydrate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/index.html) &gt; [elementDidHydrate](../fast-element.elementhydrationcallbacks.elementdidhydrate/index.html)
-
-## ElementHydrationCallbacks.elementDidHydrate() method
-
-Called after an individual element's hydration has finished.
-
-**Signature:**
-
-```typescript
-elementDidHydrate?(source: HTMLElement): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-source
-
-
-</td><td>
-
-HTMLElement
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementwillhydrate.md b/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementwillhydrate.md
deleted file mode 100644
index 7346d0f009e..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.elementwillhydrate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.elementhydrationcallbacks.elementwillhydrate"
-title: "ElementHydrationCallbacks.elementWillHydrate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementhydrationcallbacks.elementwillhydrate"
-  parent: "api3xfast-element"
-  title: "ElementHydrationCallbacks.elementWillHydrate() method"
-navigationOptions:
-  activeKey: "api3xfast-element.elementhydrationcallbacks.elementwillhydrate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/index.html) &gt; [elementWillHydrate](../fast-element.elementhydrationcallbacks.elementwillhydrate/index.html)
-
-## ElementHydrationCallbacks.elementWillHydrate() method
-
-Called before an individual element's hydration begins.
-
-**Signature:**
-
-```typescript
-elementWillHydrate?(source: HTMLElement): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-source
-
-
-</td><td>
-
-HTMLElement
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationcomplete.md b/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationcomplete.md
deleted file mode 100644
index 6df6f3755f6..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationcomplete.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.elementhydrationcallbacks.hydrationcomplete"
-title: "ElementHydrationCallbacks.hydrationComplete() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementhydrationcallbacks.hydrationcomplete"
-  parent: "api3xfast-element"
-  title: "ElementHydrationCallbacks.hydrationComplete() method"
-navigationOptions:
-  activeKey: "api3xfast-element.elementhydrationcallbacks.hydrationcomplete"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/index.html) &gt; [hydrationComplete](../fast-element.elementhydrationcallbacks.hydrationcomplete/index.html)
-
-## ElementHydrationCallbacks.hydrationComplete() method
-
-Called after all prerendered elements have completed hydration.
-
-**Signature:**
-
-```typescript
-hydrationComplete?(): void;
-```
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationstarted.md b/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationstarted.md
deleted file mode 100644
index d595305f045..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.hydrationstarted.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.elementhydrationcallbacks.hydrationstarted"
-title: "ElementHydrationCallbacks.hydrationStarted() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementhydrationcallbacks.hydrationstarted"
-  parent: "api3xfast-element"
-  title: "ElementHydrationCallbacks.hydrationStarted() method"
-navigationOptions:
-  activeKey: "api3xfast-element.elementhydrationcallbacks.hydrationstarted"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/index.html) &gt; [hydrationStarted](../fast-element.elementhydrationcallbacks.hydrationstarted/index.html)
-
-## ElementHydrationCallbacks.hydrationStarted() method
-
-Called once when the first prerendered element begins hydrating.
-
-**Signature:**
-
-```typescript
-hydrationStarted?(): void;
-```
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.md b/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.md
deleted file mode 100644
index ccd69ff8d94..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.elementhydrationcallbacks.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-id: "fast-element.elementhydrationcallbacks"
-title: "ElementHydrationCallbacks interface"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.elementhydrationcallbacks"
-  parent: "api3xfast-element"
-  title: "ElementHydrationCallbacks interface"
-navigationOptions:
-  activeKey: "api3xfast-element.elementhydrationcallbacks"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/index.html)
-
-## ElementHydrationCallbacks interface
-
-Lifecycle callbacks for element hydration events.
-
-**Signature:**
-
-```typescript
-export interface ElementHydrationCallbacks 
-```
-
-## Methods
-
-<table><thead><tr><th>
-
-Method
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[elementDidHydrate(source)?](../fast-element.elementhydrationcallbacks.elementdidhydrate/)
-
-
-</td><td>
-
-_(Optional)_ Called after an individual element's hydration has finished.
-
-
-</td></tr>
-<tr><td>
-
-[elementWillHydrate(source)?](../fast-element.elementhydrationcallbacks.elementwillhydrate/)
-
-
-</td><td>
-
-_(Optional)_ Called before an individual element's hydration begins.
-
-
-</td></tr>
-<tr><td>
-
-[hydrationComplete()?](../fast-element.elementhydrationcallbacks.hydrationcomplete/)
-
-
-</td><td>
-
-_(Optional)_ Called after all prerendered elements have completed hydration.
-
-
-</td></tr>
-<tr><td>
-
-[hydrationStarted()?](../fast-element.elementhydrationcallbacks.hydrationstarted/)
-
-
-</td><td>
-
-_(Optional)_ Called once when the first prerendered element begins hydrating.
-
-
-</td></tr>
-</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.enablehydration.md b/sites/website/src/docs/3.x/api/fast-element.enablehydration.md
new file mode 100644
index 00000000000..578acb4cd68
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.enablehydration.md
@@ -0,0 +1,83 @@
+---
+id: "fast-element.enablehydration"
+title: "enableHydration() function"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.enablehydration"
+  parent: "api3xfast-element"
+  title: "enableHydration() function"
+navigationOptions:
+  activeKey: "api3xfast-element.enablehydration"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [enableHydration](../fast-element.enablehydration/index.html)
+
+## enableHydration() function
+
+Enables hydration support for prerendered FAST elements.
+
+**Signature:**
+
+```typescript
+export declare function enableHydration(options?: HydrationOptions): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+options
+
+
+</td><td>
+
+[HydrationOptions](../fast-element.hydrationoptions/)
+
+
+</td><td>
+
+_(Optional)_ Optional callbacks for global hydration events.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+
+## Remarks
+
+Call this before any FAST elements connect to the DOM. Hydration logic is not active unless this function is called, keeping `FASTElement` lightweight for client-side-only applications.
+
+Safe to call multiple times — the hydration hook is installed once and subsequent calls merge their options into the shared tracker.
+
+## Example
+
+
+```ts
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({
+    hydrationComplete() {
+        console.log("hydration complete");
+    },
+});
+```
diff --git a/sites/website/src/docs/3.x/api/fast-element.fast.md b/sites/website/src/docs/3.x/api/fast-element.fast.md
index adc54917293..d510ce540b3 100644
--- a/sites/website/src/docs/3.x/api/fast-element.fast.md
+++ b/sites/website/src/docs/3.x/api/fast-element.fast.md
@@ -15,10 +15,14 @@ navigationOptions:
 
 ## FAST variable
 
-The FAST global.
+The FAST messaging API for warnings and errors.
 
 **Signature:**
 
 ```typescript
-FAST: FASTGlobal
+FAST: {
+    warn(_code: number, _values?: Record<string, any>): void;
+    error(code: number, _values?: Record<string, any>): Error;
+    addMessages(messages: Record<number, string>): void;
+}
 ```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.addmessages.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.addmessages.md
deleted file mode 100644
index 44fb4e90441..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.addmessages.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: "fast-element.fastglobal.addmessages"
-title: "FASTGlobal.addMessages() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal.addmessages"
-  parent: "api3xfast-element"
-  title: "FASTGlobal.addMessages() method"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal.addmessages"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html) &gt; [addMessages](../fast-element.fastglobal.addmessages/index.html)
-
-## FASTGlobal.addMessages() method
-
-Adds debug messages for errors and warnings.
-
-**Signature:**
-
-```typescript
-addMessages(messages: Record<number, string>): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-messages
-
-
-</td><td>
-
-Record&lt;number, string&gt;
-
-
-</td><td>
-
-The message dictionary to add.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
-
-## Remarks
-
-Message can include placeholders like $<!-- -->{<!-- -->name<!-- -->} which can be replaced by values passed at runtime.
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.error.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.error.md
deleted file mode 100644
index 04839b09f0a..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.error.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: "fast-element.fastglobal.error"
-title: "FASTGlobal.error() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal.error"
-  parent: "api3xfast-element"
-  title: "FASTGlobal.error() method"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal.error"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html) &gt; [error](../fast-element.fastglobal.error/index.html)
-
-## FASTGlobal.error() method
-
-Creates an error.
-
-**Signature:**
-
-```typescript
-error(code: number, values?: Record<string, any>): Error;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-code
-
-
-</td><td>
-
-number
-
-
-</td><td>
-
-The error code to send.
-
-
-</td></tr>
-<tr><td>
-
-values
-
-
-</td><td>
-
-Record&lt;string, any&gt;
-
-
-</td><td>
-
-_(Optional)_ Values relevant for the error message.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-Error
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid.md
deleted file mode 100644
index b5c2e92a7e4..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: "fast-element.fastglobal.getbyid"
-title: "FASTGlobal.getById() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal.getbyid"
-  parent: "api3xfast-element"
-  title: "FASTGlobal.getById() method"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal.getbyid"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html) &gt; [getById](../fast-element.fastglobal.getbyid/index.html)
-
-## FASTGlobal.getById() method
-
-Gets a kernel value.
-
-**Signature:**
-
-```typescript
-getById<T>(id: string | number): T | null;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-id
-
-
-</td><td>
-
-string \| number
-
-
-</td><td>
-
-The id to get the value for.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-T \| null
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid_1.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid_1.md
deleted file mode 100644
index 765fdf72d91..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.getbyid_1.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: "fast-element.fastglobal.getbyid_1"
-title: "FASTGlobal.getById() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal.getbyid_1"
-  parent: "api3xfast-element"
-  title: "FASTGlobal.getById() method"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal.getbyid_1"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html) &gt; [getById](../fast-element.fastglobal.getbyid_1/index.html)
-
-## FASTGlobal.getById() method
-
-**Signature:**
-
-```typescript
-getById<T>(id: string | number, initialize: () => T): T;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-id
-
-
-</td><td>
-
-string \| number
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-initialize
-
-
-</td><td>
-
-() =&gt; T
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-T
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.md
deleted file mode 100644
index dc3eadc0fa6..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-id: "fast-element.fastglobal"
-title: "FASTGlobal interface"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal"
-  parent: "api3xfast-element"
-  title: "FASTGlobal interface"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html)
-
-## FASTGlobal interface
-
-The FAST global.
-
-**Signature:**
-
-```typescript
-export interface FASTGlobal 
-```
-
-## Methods
-
-<table><thead><tr><th>
-
-Method
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[addMessages(messages)](../fast-element.fastglobal.addmessages/)
-
-
-</td><td>
-
-Adds debug messages for errors and warnings.
-
-
-</td></tr>
-<tr><td>
-
-[error(code, values)](../fast-element.fastglobal.error/)
-
-
-</td><td>
-
-Creates an error.
-
-
-</td></tr>
-<tr><td>
-
-[getById(id)](../fast-element.fastglobal.getbyid/)
-
-
-</td><td>
-
-Gets a kernel value.
-
-
-</td></tr>
-<tr><td>
-
-[getById(id, initialize)](../fast-element.fastglobal.getbyid_1/)
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[warn(code, values)](../fast-element.fastglobal.warn/)
-
-
-</td><td>
-
-Sends a warning to the developer.
-
-
-</td></tr>
-</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.fastglobal.warn.md b/sites/website/src/docs/3.x/api/fast-element.fastglobal.warn.md
deleted file mode 100644
index ac924e8e472..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.fastglobal.warn.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-id: "fast-element.fastglobal.warn"
-title: "FASTGlobal.warn() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.fastglobal.warn"
-  parent: "api3xfast-element"
-  title: "FASTGlobal.warn() method"
-navigationOptions:
-  activeKey: "api3xfast-element.fastglobal.warn"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [FASTGlobal](../fast-element.fastglobal/index.html) &gt; [warn](../fast-element.fastglobal.warn/index.html)
-
-## FASTGlobal.warn() method
-
-Sends a warning to the developer.
-
-**Signature:**
-
-```typescript
-warn(code: number, values?: Record<string, any>): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-code
-
-
-</td><td>
-
-number
-
-
-</td><td>
-
-The warning code to send.
-
-
-</td></tr>
-<tr><td>
-
-values
-
-
-</td><td>
-
-Record&lt;string, any&gt;
-
-
-</td><td>
-
-_(Optional)_ Values relevant for the warning message.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.htmlview.ishydrated.md b/sites/website/src/docs/3.x/api/fast-element.htmlview.ishydrated.md
new file mode 100644
index 00000000000..07dcbc30be1
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.htmlview.ishydrated.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.htmlview.ishydrated"
+title: "HTMLView.isHydrated property"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.htmlview.ishydrated"
+  parent: "api3xfast-element"
+  title: "HTMLView.isHydrated property"
+navigationOptions:
+  activeKey: "api3xfast-element.htmlview.ishydrated"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [HTMLView](../fast-element.htmlview/index.html) &gt; [isHydrated](../fast-element.htmlview.ishydrated/index.html)
+
+## HTMLView.isHydrated property
+
+Resolves `true` after prerendered content has been hydrated, `false` when client-side rendered or hydration not enabled.
+
+**Signature:**
+
+```typescript
+isHydrated: Promise<boolean>;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.htmlview.md b/sites/website/src/docs/3.x/api/fast-element.htmlview.md
index c4676910ee4..c737ddcc3b4 100644
--- a/sites/website/src/docs/3.x/api/fast-element.htmlview.md
+++ b/sites/website/src/docs/3.x/api/fast-element.htmlview.md
@@ -139,6 +139,25 @@ boolean
 Indicates whether the controller is bound.
 
 
+</td></tr>
+<tr><td>
+
+[isHydrated](../fast-element.htmlview.ishydrated/)
+
+
+</td><td>
+
+
+</td><td>
+
+Promise&lt;boolean&gt;
+
+
+</td><td>
+
+Resolves `true` after prerendered content has been hydrated, `false` when client-side rendered or hydration not enabled.
+
+
 </td></tr>
 <tr><td>
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationcomplete.md b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationcomplete.md
new file mode 100644
index 00000000000..c0eef5db718
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationcomplete.md
@@ -0,0 +1,27 @@
+---
+id: "fast-element.hydrationoptions.hydrationcomplete"
+title: "HydrationOptions.hydrationComplete() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.hydrationoptions.hydrationcomplete"
+  parent: "api3xfast-element"
+  title: "HydrationOptions.hydrationComplete() method"
+navigationOptions:
+  activeKey: "api3xfast-element.hydrationoptions.hydrationcomplete"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [HydrationOptions](../fast-element.hydrationoptions/index.html) &gt; [hydrationComplete](../fast-element.hydrationoptions.hydrationcomplete/index.html)
+
+## HydrationOptions.hydrationComplete() method
+
+Called after all prerendered elements have completed hydration.
+
+**Signature:**
+
+```typescript
+hydrationComplete?(): void;
+```
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationstarted.md b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationstarted.md
new file mode 100644
index 00000000000..5832c4a96d2
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.hydrationstarted.md
@@ -0,0 +1,27 @@
+---
+id: "fast-element.hydrationoptions.hydrationstarted"
+title: "HydrationOptions.hydrationStarted() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.hydrationoptions.hydrationstarted"
+  parent: "api3xfast-element"
+  title: "HydrationOptions.hydrationStarted() method"
+navigationOptions:
+  activeKey: "api3xfast-element.hydrationoptions.hydrationstarted"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [HydrationOptions](../fast-element.hydrationoptions/index.html) &gt; [hydrationStarted](../fast-element.hydrationoptions.hydrationstarted/index.html)
+
+## HydrationOptions.hydrationStarted() method
+
+Called once when the first prerendered element begins hydrating.
+
+**Signature:**
+
+```typescript
+hydrationStarted?(): void;
+```
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.md b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.md
new file mode 100644
index 00000000000..e0740eb72c9
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationoptions.md
@@ -0,0 +1,61 @@
+---
+id: "fast-element.hydrationoptions"
+title: "HydrationOptions interface"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.hydrationoptions"
+  parent: "api3xfast-element"
+  title: "HydrationOptions interface"
+navigationOptions:
+  activeKey: "api3xfast-element.hydrationoptions"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [HydrationOptions](../fast-element.hydrationoptions/index.html)
+
+## HydrationOptions interface
+
+Options for configuring global hydration lifecycle events.
+
+**Signature:**
+
+```typescript
+export interface HydrationOptions 
+```
+
+## Methods
+
+<table><thead><tr><th>
+
+Method
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[hydrationComplete()?](../fast-element.hydrationoptions.hydrationcomplete/)
+
+
+</td><td>
+
+_(Optional)_ Called after all prerendered elements have completed hydration.
+
+
+</td></tr>
+<tr><td>
+
+[hydrationStarted()?](../fast-element.hydrationoptions.hydrationstarted/)
+
+
+</td><td>
+
+_(Optional)_ Called once when the first prerendered element begins hydrating.
+
+
+</td></tr>
+</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker._constructor_.md b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker._constructor_.md
index dc089a30cf2..e76ffbe6204 100644
--- a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker._constructor_.md
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker._constructor_.md
@@ -20,7 +20,7 @@ Constructs a new instance of the `HydrationTracker` class
 **Signature:**
 
 ```typescript
-constructor(callbacks: ElementHydrationCallbacks);
+constructor(options: HydrationOptions);
 ```
 
 ## Parameters
@@ -43,12 +43,12 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-callbacks
+options
 
 
 </td><td>
 
-[ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/)
+[HydrationOptions](../fast-element.hydrationoptions/)
 
 
 </td><td>
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.md b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.md
index 4b628df1d1f..79f2ba8d6e2 100644
--- a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.md
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## HydrationTracker class
 
-Tracks prerendered elements through the hydration lifecycle and fires callbacks at each stage. Each element is added before its hydration bind and removed after. When the last element finishes and no new elements arrive, `hydrationComplete` is fired.
+Tracks prerendered elements through the hydration lifecycle and fires global callbacks at start and completion. Per-element callbacks (`elementWillHydrate`<!-- -->, `elementDidHydrate`<!-- -->) are handled through definition-level [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/)<!-- -->.
 
 **Signature:**
 
@@ -43,7 +43,7 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[(constructor)(callbacks)](../fast-element.hydrationtracker._constructor_/)
+[(constructor)(options)](../fast-element.hydrationtracker._constructor_/)
 
 
 </td><td>
@@ -91,7 +91,7 @@ Registers an element as pending hydration. Fires `hydrationStarted` on the first
 </td></tr>
 <tr><td>
 
-[notifyWillHydrate(element)](../fast-element.hydrationtracker.notifywillhydrate/)
+[mergeOptions(incoming)](../fast-element.hydrationtracker.mergeoptions/)
 
 
 </td><td>
@@ -99,7 +99,7 @@ Registers an element as pending hydration. Fires `hydrationStarted` on the first
 
 </td><td>
 
-Fires the `elementWillHydrate` callback for an element.
+Merges additional options into the tracker, chaining callbacks so both the original and new callbacks fire.
 
 
 </td></tr>
@@ -113,7 +113,7 @@ Fires the `elementWillHydrate` callback for an element.
 
 </td><td>
 
-Removes an element from the pending set, fires `elementDidHydrate`<!-- -->, and schedules a debounced completion check.
+Removes an element from the pending set and schedules a debounced completion check.
 
 
 </td></tr>
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.mergeoptions.md b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.mergeoptions.md
new file mode 100644
index 00000000000..c2bcca6e579
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.mergeoptions.md
@@ -0,0 +1,62 @@
+---
+id: "fast-element.hydrationtracker.mergeoptions"
+title: "HydrationTracker.mergeOptions() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.hydrationtracker.mergeoptions"
+  parent: "api3xfast-element"
+  title: "HydrationTracker.mergeOptions() method"
+navigationOptions:
+  activeKey: "api3xfast-element.hydrationtracker.mergeoptions"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [HydrationTracker](../fast-element.hydrationtracker/index.html) &gt; [mergeOptions](../fast-element.hydrationtracker.mergeoptions/index.html)
+
+## HydrationTracker.mergeOptions() method
+
+Merges additional options into the tracker, chaining callbacks so both the original and new callbacks fire.
+
+**Signature:**
+
+```typescript
+mergeOptions(incoming: HydrationOptions): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+incoming
+
+
+</td><td>
+
+[HydrationOptions](../fast-element.hydrationoptions/)
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.notifywillhydrate.md b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.notifywillhydrate.md
deleted file mode 100644
index 0533d778d17..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.notifywillhydrate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.hydrationtracker.notifywillhydrate"
-title: "HydrationTracker.notifyWillHydrate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.hydrationtracker.notifywillhydrate"
-  parent: "api3xfast-element"
-  title: "HydrationTracker.notifyWillHydrate() method"
-navigationOptions:
-  activeKey: "api3xfast-element.hydrationtracker.notifywillhydrate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [HydrationTracker](../fast-element.hydrationtracker/index.html) &gt; [notifyWillHydrate](../fast-element.hydrationtracker.notifywillhydrate/index.html)
-
-## HydrationTracker.notifyWillHydrate() method
-
-Fires the `elementWillHydrate` callback for an element.
-
-**Signature:**
-
-```typescript
-notifyWillHydrate(element: HTMLElement): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-element
-
-
-</td><td>
-
-HTMLElement
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.remove.md b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.remove.md
index 9204be4fe33..b2e4f9ff79f 100644
--- a/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.remove.md
+++ b/sites/website/src/docs/3.x/api/fast-element.hydrationtracker.remove.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## HydrationTracker.remove() method
 
-Removes an element from the pending set, fires `elementDidHydrate`<!-- -->, and schedules a debounced completion check.
+Removes an element from the pending set and schedules a debounced completion check.
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.lengthobserver.length.md b/sites/website/src/docs/3.x/api/fast-element.lengthobserver.length.md
deleted file mode 100644
index 435d4f7426a..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.lengthobserver.length.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.lengthobserver.length"
-title: "LengthObserver.length property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.lengthobserver.length"
-  parent: "api3xfast-element"
-  title: "LengthObserver.length property"
-navigationOptions:
-  activeKey: "api3xfast-element.lengthobserver.length"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [LengthObserver](../fast-element.lengthobserver/index.html) &gt; [length](../fast-element.lengthobserver.length/index.html)
-
-## LengthObserver.length property
-
-The length of the observed array.
-
-**Signature:**
-
-```typescript
-length: number;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.lengthobserver.md b/sites/website/src/docs/3.x/api/fast-element.lengthobserver.md
deleted file mode 100644
index 45c4708cbbb..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.lengthobserver.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-id: "fast-element.lengthobserver"
-title: "LengthObserver interface"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.lengthobserver"
-  parent: "api3xfast-element"
-  title: "LengthObserver interface"
-navigationOptions:
-  activeKey: "api3xfast-element.lengthobserver"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [LengthObserver](../fast-element.lengthobserver/index.html)
-
-## LengthObserver interface
-
-Observes array lengths.
-
-**Signature:**
-
-```typescript
-export interface LengthObserver extends Subscriber 
-```
-**Extends:** [Subscriber](../fast-element.subscriber/)
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[length](../fast-element.lengthobserver.length/)
-
-
-</td><td>
-
-
-</td><td>
-
-number
-
-
-</td><td>
-
-The length of the observed array.
-
-
-</td></tr>
-</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.lengthof.md b/sites/website/src/docs/3.x/api/fast-element.lengthof.md
deleted file mode 100644
index ecc503bcba0..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.lengthof.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: "fast-element.lengthof"
-title: "lengthOf() function"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.lengthof"
-  parent: "api3xfast-element"
-  title: "lengthOf() function"
-navigationOptions:
-  activeKey: "api3xfast-element.lengthof"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [lengthOf](../fast-element.lengthof/index.html)
-
-## lengthOf() function
-
-Enables observing the length of an array.
-
-**Signature:**
-
-```typescript
-export declare function lengthOf<T>(array: readonly T[]): number;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-readonly T\[\]
-
-
-</td><td>
-
-The array to observe the length of.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-number
-
-The length of the array.
diff --git a/sites/website/src/docs/3.x/api/fast-element.md b/sites/website/src/docs/3.x/api/fast-element.md
index ff22b657b5a..8238584f05f 100644
--- a/sites/website/src/docs/3.x/api/fast-element.md
+++ b/sites/website/src/docs/3.x/api/fast-element.md
@@ -125,7 +125,7 @@ The standard View implementation, which also implements ElementView and Syntheti
 
 </td><td>
 
-Tracks prerendered elements through the hydration lifecycle and fires callbacks at each stage. Each element is added before its hydration bind and removed after. When the last element finishes and no new elements arrive, `hydrationComplete` is fired.
+Tracks prerendered elements through the hydration lifecycle and fires global callbacks at start and completion. Per-element callbacks (`elementWillHydrate`<!-- -->, `elementDidHydrate`<!-- -->) are handled through definition-level [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/)<!-- -->.
 
 
 </td></tr>
@@ -389,34 +389,34 @@ A directive that observes the `childNodes` of an element and updates a property
 </td></tr>
 <tr><td>
 
-[cssDirective()](../fast-element.cssdirective/)
+[customElement(nameOrDef)](../fast-element.customelement/)
 
 
 </td><td>
 
-Decorator: Defines a CSSDirective.
+Decorator: Defines a platform custom element based on `FASTElement`<!-- -->.
 
 
 </td></tr>
 <tr><td>
 
-[customElement(nameOrDef)](../fast-element.customelement/)
+[elements(selector)](../fast-element.elements/)
 
 
 </td><td>
 
-Decorator: Defines a platform custom element based on `FASTElement`<!-- -->.
+Creates a function that can be used to filter a Node array, selecting only elements.
 
 
 </td></tr>
 <tr><td>
 
-[elements(selector)](../fast-element.elements/)
+[enableHydration(options)](../fast-element.enablehydration/)
 
 
 </td><td>
 
-Creates a function that can be used to filter a Node array, selecting only elements.
+Enables hydration support for prerendered FAST elements.
 
 
 </td></tr>
@@ -474,17 +474,6 @@ Decorator: Defines an HTMLDirective.
 **_(BETA)_**
 
 
-</td></tr>
-<tr><td>
-
-[lengthOf(array)](../fast-element.lengthof/)
-
-
-</td><td>
-
-Enables observing the length of an array.
-
-
 </td></tr>
 <tr><td>
 
@@ -584,17 +573,6 @@ A directive that enables list rendering.
 A directive that observes the `assignedNodes()` of a slot and updates a property whenever they change.
 
 
-</td></tr>
-<tr><td>
-
-[sortedCount(array)](../fast-element.sortedcount/)
-
-
-</td><td>
-
-Enables observing the sorted property of an array.
-
-
 </td></tr>
 <tr><td>
 
@@ -643,17 +621,6 @@ Description
 Represents a getter/setter property accessor on an object.
 
 
-</td></tr>
-<tr><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-An observer for arrays.
-
-
 </td></tr>
 <tr><td>
 
@@ -720,28 +687,6 @@ A simple template that can create ContentView instances.
 A simple View that can be interpolated into HTML content.
 
 
-</td></tr>
-<tr><td>
-
-[CSSDirective](../fast-element.cssdirective/)
-
-
-</td><td>
-
-Directive for use in [css](../fast-element.css/)<!-- -->.
-
-
-</td></tr>
-<tr><td>
-
-[CSSDirectiveDefinition](../fast-element.cssdirectivedefinition/)
-
-
-</td><td>
-
-Defines metadata for a CSSDirective.
-
-
 </td></tr>
 <tr><td>
 
@@ -775,17 +720,6 @@ A security policy that FAST can use to interact with the DOM.
 A type that instantiates an ElementController
 
 
-</td></tr>
-<tr><td>
-
-[ElementHydrationCallbacks](../fast-element.elementhydrationcallbacks/)
-
-
-</td><td>
-
-Lifecycle callbacks for element hydration events.
-
-
 </td></tr>
 <tr><td>
 
@@ -863,17 +797,6 @@ Observes an expression for changes.
 Represents a custom element based on the FASTElement infrastructure.
 
 
-</td></tr>
-<tr><td>
-
-[FASTGlobal](../fast-element.fastglobal/)
-
-
-</td><td>
-
-The FAST global.
-
-
 </td></tr>
 <tr><td>
 
@@ -942,12 +865,12 @@ The result of a template compilation operation.
 </td></tr>
 <tr><td>
 
-[LengthObserver](../fast-element.lengthobserver/)
+[HydrationOptions](../fast-element.hydrationoptions/)
 
 
 </td><td>
 
-Observes array lengths.
+Options for configuring global hydration lifecycle events.
 
 
 </td></tr>
@@ -1038,28 +961,6 @@ Shadow root initialization options.
 The options used to configure slotted node observation.
 
 
-</td></tr>
-<tr><td>
-
-[SortObserver](../fast-element.sortobserver/)
-
-
-</td><td>
-
-Observes array sort.
-
-
-</td></tr>
-<tr><td>
-
-[SpliceStrategy](../fast-element.splicestrategy/)
-
-
-</td><td>
-
-An approach to tracking changes in an array.
-
-
 </td></tr>
 <tr><td>
 
@@ -1221,17 +1122,6 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-An observer for arrays.
-
-
-</td></tr>
-<tr><td>
-
 [AttributeConfiguration](../fast-element.attributeconfiguration/)
 
 
@@ -1262,39 +1152,6 @@ A [ValueConverter](../fast-element.valueconverter/) that converts to and from `b
 Common APIs related to compilation.
 
 
-</td></tr>
-<tr><td>
-
-[css](../fast-element.css/)
-
-
-</td><td>
-
-Transforms a template literal string into styles.
-
-
-</td></tr>
-<tr><td>
-
-[CSSDirective](../fast-element.cssdirective/)
-
-
-</td><td>
-
-Instructs the css engine to provide styles during CSS template composition.
-
-
-</td></tr>
-<tr><td>
-
-[deferHydrationAttribute](../fast-element.deferhydrationattribute/)
-
-
-</td><td>
-
-**_(BETA)_** The attribute used to defer hydration of an element.
-
-
 </td></tr>
 <tr><td>
 
@@ -1347,7 +1204,7 @@ Provides additional contextual information available to behaviors and expression
 
 </td><td>
 
-The FAST global.
+The FAST messaging API for warnings and errors.
 
 
 </td></tr>
@@ -1449,28 +1306,6 @@ Common APIs related to content parsing.
 Describes how the source's lifetime relates to its controller's lifetime.
 
 
-</td></tr>
-<tr><td>
-
-[SpliceStrategy](../fast-element.splicestrategy/)
-
-
-</td><td>
-
-Functionality related to tracking changes in arrays.
-
-
-</td></tr>
-<tr><td>
-
-[SpliceStrategySupport](../fast-element.splicestrategysupport/)
-
-
-</td><td>
-
-Indicates what level of feature support the splice strategy provides.
-
-
 </td></tr>
 <tr><td>
 
@@ -1618,28 +1453,6 @@ Represents a type which can be constructed with the new operator.
 A type that instantiates a StyleStrategy.
 
 
-</td></tr>
-<tr><td>
-
-[CSSTemplateTag](../fast-element.csstemplatetag/)
-
-
-</td><td>
-
-Transforms a template literal string into styles.
-
-
-</td></tr>
-<tr><td>
-
-[CSSValue](../fast-element.cssvalue/)
-
-
-</td><td>
-
-Represents the types of values that can be interpolated into a template.
-
-
 </td></tr>
 <tr><td>
 
@@ -1739,17 +1552,6 @@ Transforms a template literal string into a ViewTemplate.
 Describes how the source's lifetime relates to its controller's lifetime.
 
 
-</td></tr>
-<tr><td>
-
-[SpliceStrategySupport](../fast-element.splicestrategysupport/)
-
-
-</td><td>
-
-The available values for SpliceStrategySupport.
-
-
 </td></tr>
 <tr><td>
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.sortedcount.md b/sites/website/src/docs/3.x/api/fast-element.sortedcount.md
deleted file mode 100644
index db2e02ec2e3..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.sortedcount.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-id: "fast-element.sortedcount"
-title: "sortedCount() function"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.sortedcount"
-  parent: "api3xfast-element"
-  title: "sortedCount() function"
-navigationOptions:
-  activeKey: "api3xfast-element.sortedcount"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [sortedCount](../fast-element.sortedcount/index.html)
-
-## sortedCount() function
-
-Enables observing the sorted property of an array.
-
-**Signature:**
-
-```typescript
-export declare function sortedCount<T>(array: readonly T[]): number;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-readonly T\[\]
-
-
-</td><td>
-
-The array to observe the sorted property of.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-number
-
-The sorted property.
diff --git a/sites/website/src/docs/3.x/api/fast-element.sortobserver.md b/sites/website/src/docs/3.x/api/fast-element.sortobserver.md
deleted file mode 100644
index df3a7e7373d..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.sortobserver.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-id: "fast-element.sortobserver"
-title: "SortObserver interface"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.sortobserver"
-  parent: "api3xfast-element"
-  title: "SortObserver interface"
-navigationOptions:
-  activeKey: "api3xfast-element.sortobserver"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SortObserver](../fast-element.sortobserver/index.html)
-
-## SortObserver interface
-
-Observes array sort.
-
-**Signature:**
-
-```typescript
-export interface SortObserver extends Subscriber 
-```
-**Extends:** [Subscriber](../fast-element.subscriber/)
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[sorted](../fast-element.sortobserver.sorted/)
-
-
-</td><td>
-
-
-</td><td>
-
-number
-
-
-</td><td>
-
-The sorted times on the observed array, this should be incremented every time an item in the array changes location.
-
-
-</td></tr>
-</tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element.sortobserver.sorted.md b/sites/website/src/docs/3.x/api/fast-element.sortobserver.sorted.md
deleted file mode 100644
index ebcac4d9623..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.sortobserver.sorted.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.sortobserver.sorted"
-title: "SortObserver.sorted property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.sortobserver.sorted"
-  parent: "api3xfast-element"
-  title: "SortObserver.sorted property"
-navigationOptions:
-  activeKey: "api3xfast-element.sortobserver.sorted"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SortObserver](../fast-element.sortobserver/index.html) &gt; [sorted](../fast-element.sortobserver.sorted/index.html)
-
-## SortObserver.sorted property
-
-The sorted times on the observed array, this should be incremented every time an item in the array changes location.
-
-**Signature:**
-
-```typescript
-sorted: number;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.md
deleted file mode 100644
index 622bdce1232..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-id: "fast-element.splicestrategy"
-title: "SpliceStrategy variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy variable"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html)
-
-## SpliceStrategy variable
-
-Functionality related to tracking changes in arrays.
-
-**Signature:**
-
-```typescript
-SpliceStrategy: Readonly<{
-    readonly reset: Splice[];
-    readonly setDefaultStrategy: (strategy: SpliceStrategy) => void;
-}>
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.normalize.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.normalize.md
deleted file mode 100644
index f86762e6504..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.normalize.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-id: "fast-element.splicestrategy.normalize"
-title: "SpliceStrategy.normalize() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.normalize"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.normalize() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.normalize"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [normalize](../fast-element.splicestrategy.normalize/index.html)
-
-## SpliceStrategy.normalize() method
-
-Normalizes the splices before delivery to array change subscribers.
-
-**Signature:**
-
-```typescript
-normalize(previous: unknown[] | undefined, current: unknown[], changes: Splice[] | undefined): readonly Splice[];
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-previous
-
-
-</td><td>
-
-unknown\[\] \| undefined
-
-
-</td><td>
-
-The previous version of the array if a reset has taken place.
-
-
-</td></tr>
-<tr><td>
-
-current
-
-
-</td><td>
-
-unknown\[\]
-
-
-</td><td>
-
-The current version of the array.
-
-
-</td></tr>
-<tr><td>
-
-changes
-
-
-</td><td>
-
-[Splice](../fast-element.splice/)<!-- -->\[\] \| undefined
-
-
-</td><td>
-
-The set of changes tracked against the array.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-readonly [Splice](../fast-element.splice/)<!-- -->\[\]
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.pop.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.pop.md
deleted file mode 100644
index fffbc0193c5..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.pop.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.pop"
-title: "SpliceStrategy.pop() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.pop"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.pop() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.pop"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [pop](../fast-element.splicestrategy.pop/index.html)
-
-## SpliceStrategy.pop() method
-
-Performs and tracks a pop operation on an array.
-
-**Signature:**
-
-```typescript
-pop(array: any[], observer: ArrayObserver, pop: typeof Array.prototype.pop, args: any[]): any;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-pop
-
-
-</td><td>
-
-typeof Array.prototype.pop
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.push.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.push.md
deleted file mode 100644
index 86d9a758e19..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.push.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.push"
-title: "SpliceStrategy.push() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.push"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.push() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.push"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [push](../fast-element.splicestrategy.push/index.html)
-
-## SpliceStrategy.push() method
-
-Performs and tracks a push operation on an array.
-
-**Signature:**
-
-```typescript
-push(array: any[], observer: ArrayObserver, push: typeof Array.prototype.push, args: any[]): any;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-push
-
-
-</td><td>
-
-typeof Array.prototype.push
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.reverse.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.reverse.md
deleted file mode 100644
index 522b4b5db97..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.reverse.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.reverse"
-title: "SpliceStrategy.reverse() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.reverse"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.reverse() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.reverse"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [reverse](../fast-element.splicestrategy.reverse/index.html)
-
-## SpliceStrategy.reverse() method
-
-Performs and tracks a reverse operation on an array.
-
-**Signature:**
-
-```typescript
-reverse(array: any[], observer: ArrayObserver, reverse: typeof Array.prototype.reverse, args: any[]): any;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-reverse
-
-
-</td><td>
-
-typeof Array.prototype.reverse
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.shift.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.shift.md
deleted file mode 100644
index 7fcb9da4830..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.shift.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.shift"
-title: "SpliceStrategy.shift() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.shift"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.shift() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.shift"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [shift](../fast-element.splicestrategy.shift/index.html)
-
-## SpliceStrategy.shift() method
-
-Performs and tracks a shift operation on an array.
-
-**Signature:**
-
-```typescript
-shift(array: any[], observer: ArrayObserver, shift: typeof Array.prototype.shift, args: any[]): any;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-shift
-
-
-</td><td>
-
-typeof Array.prototype.shift
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.sort.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.sort.md
deleted file mode 100644
index b174c2b794c..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.sort.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.sort"
-title: "SpliceStrategy.sort() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.sort"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.sort() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.sort"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [sort](../fast-element.splicestrategy.sort/index.html)
-
-## SpliceStrategy.sort() method
-
-Performs and tracks a sort operation on an array.
-
-**Signature:**
-
-```typescript
-sort(array: any[], observer: ArrayObserver, sort: typeof Array.prototype.sort, args: any[]): any[];
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-sort
-
-
-</td><td>
-
-typeof Array.prototype.sort
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any\[\]
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.splice.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.splice.md
deleted file mode 100644
index 3ae40f7af8e..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.splice.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.splice"
-title: "SpliceStrategy.splice() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.splice"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.splice() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.splice"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [splice](../fast-element.splicestrategy.splice/index.html)
-
-## SpliceStrategy.splice() method
-
-Performs and tracks a splice operation on an array.
-
-**Signature:**
-
-```typescript
-splice(array: any[], observer: ArrayObserver, splice: typeof Array.prototype.splice, args: any[]): any;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-splice
-
-
-</td><td>
-
-typeof Array.prototype.splice
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.support.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.support.md
deleted file mode 100644
index 233c8284604..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.support.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-id: "fast-element.splicestrategy.support"
-title: "SpliceStrategy.support property"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.support"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.support property"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.support"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [support](../fast-element.splicestrategy.support/index.html)
-
-## SpliceStrategy.support property
-
-The level of feature support the splice strategy provides.
-
-**Signature:**
-
-```typescript
-readonly support: SpliceStrategySupport;
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.unshift.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategy.unshift.md
deleted file mode 100644
index a33bc1428d7..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategy.unshift.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: "fast-element.splicestrategy.unshift"
-title: "SpliceStrategy.unshift() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategy.unshift"
-  parent: "api3xfast-element"
-  title: "SpliceStrategy.unshift() method"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategy.unshift"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategy](../fast-element.splicestrategy/index.html) &gt; [unshift](../fast-element.splicestrategy.unshift/index.html)
-
-## SpliceStrategy.unshift() method
-
-Performs and tracks an unshift operation on an array.
-
-**Signature:**
-
-```typescript
-unshift(array: any[], observer: ArrayObserver, unshift: typeof Array.prototype.unshift, args: any[]): any[];
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-array
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The array to track the change for.
-
-
-</td></tr>
-<tr><td>
-
-observer
-
-
-</td><td>
-
-[ArrayObserver](../fast-element.arrayobserver/)
-
-
-</td><td>
-
-The observer to register the change with.
-
-
-</td></tr>
-<tr><td>
-
-unshift
-
-
-</td><td>
-
-typeof Array.prototype.unshift
-
-
-</td><td>
-
-The operation to perform.
-
-
-</td></tr>
-<tr><td>
-
-args
-
-
-</td><td>
-
-any\[\]
-
-
-</td><td>
-
-The arguments for the operation.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-any\[\]
diff --git a/sites/website/src/docs/3.x/api/fast-element.splicestrategysupport.md b/sites/website/src/docs/3.x/api/fast-element.splicestrategysupport.md
deleted file mode 100644
index 009d88be3ea..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element.splicestrategysupport.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-id: "fast-element.splicestrategysupport"
-title: "SpliceStrategySupport variable"
-layout: 3x-api
-eleventyNavigation:
-  key: "api3xfast-element.splicestrategysupport"
-  parent: "api3xfast-element"
-  title: "SpliceStrategySupport variable"
-navigationOptions:
-  activeKey: "api3xfast-element.splicestrategysupport"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element](../fast-element/index.html) &gt; [SpliceStrategySupport](../fast-element.splicestrategysupport/index.html)
-
-## SpliceStrategySupport variable
-
-Indicates what level of feature support the splice strategy provides.
-
-**Signature:**
-
-```typescript
-SpliceStrategySupport: Readonly<{
-    readonly reset: 1;
-    readonly splice: 2;
-    readonly optimized: 3;
-}>
-```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdiddefine.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdiddefine.md
index 4fc2ca91413..b95f156949a 100644
--- a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdiddefine.md
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdiddefine.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## TemplateLifecycleCallbacks.elementDidDefine() method
 
-Called after the custom element has been defined
+Called after the custom element has been defined.
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidhydrate.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidhydrate.md
new file mode 100644
index 00000000000..9be76409add
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidhydrate.md
@@ -0,0 +1,62 @@
+---
+id: "fast-element.templatelifecyclecallbacks.elementdidhydrate"
+title: "TemplateLifecycleCallbacks.elementDidHydrate() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.templatelifecyclecallbacks.elementdidhydrate"
+  parent: "api3xfast-element"
+  title: "TemplateLifecycleCallbacks.elementDidHydrate() method"
+navigationOptions:
+  activeKey: "api3xfast-element.templatelifecyclecallbacks.elementdidhydrate"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/index.html) &gt; [elementDidHydrate](../fast-element.templatelifecyclecallbacks.elementdidhydrate/index.html)
+
+## TemplateLifecycleCallbacks.elementDidHydrate() method
+
+Called after an individual element's hydration has finished.
+
+**Signature:**
+
+```typescript
+elementDidHydrate?(source: HTMLElement): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+source
+
+
+</td><td>
+
+HTMLElement
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidregister.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidregister.md
new file mode 100644
index 00000000000..25852a8462e
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementdidregister.md
@@ -0,0 +1,62 @@
+---
+id: "fast-element.templatelifecyclecallbacks.elementdidregister"
+title: "TemplateLifecycleCallbacks.elementDidRegister() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.templatelifecyclecallbacks.elementdidregister"
+  parent: "api3xfast-element"
+  title: "TemplateLifecycleCallbacks.elementDidRegister() method"
+navigationOptions:
+  activeKey: "api3xfast-element.templatelifecyclecallbacks.elementdidregister"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/index.html) &gt; [elementDidRegister](../fast-element.templatelifecyclecallbacks.elementdidregister/index.html)
+
+## TemplateLifecycleCallbacks.elementDidRegister() method
+
+Called after the JS class definition has been registered.
+
+**Signature:**
+
+```typescript
+elementDidRegister?(name: string): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+name
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementwillhydrate.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementwillhydrate.md
new file mode 100644
index 00000000000..d39318abfee
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.elementwillhydrate.md
@@ -0,0 +1,62 @@
+---
+id: "fast-element.templatelifecyclecallbacks.elementwillhydrate"
+title: "TemplateLifecycleCallbacks.elementWillHydrate() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.templatelifecyclecallbacks.elementwillhydrate"
+  parent: "api3xfast-element"
+  title: "TemplateLifecycleCallbacks.elementWillHydrate() method"
+navigationOptions:
+  activeKey: "api3xfast-element.templatelifecyclecallbacks.elementwillhydrate"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/index.html) &gt; [elementWillHydrate](../fast-element.templatelifecyclecallbacks.elementwillhydrate/index.html)
+
+## TemplateLifecycleCallbacks.elementWillHydrate() method
+
+Called before an individual element's hydration begins.
+
+**Signature:**
+
+```typescript
+elementWillHydrate?(source: HTMLElement): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+source
+
+
+</td><td>
+
+HTMLElement
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.md
index 5f68e162d00..f4413324101 100644
--- a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.md
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.md
@@ -43,7 +43,40 @@ Description
 
 </td><td>
 
-_(Optional)_ Called after the custom element has been defined
+_(Optional)_ Called after the custom element has been defined.
+
+
+</td></tr>
+<tr><td>
+
+[elementDidHydrate(source)?](../fast-element.templatelifecyclecallbacks.elementdidhydrate/)
+
+
+</td><td>
+
+_(Optional)_ Called after an individual element's hydration has finished.
+
+
+</td></tr>
+<tr><td>
+
+[elementDidRegister(name)?](../fast-element.templatelifecyclecallbacks.elementdidregister/)
+
+
+</td><td>
+
+_(Optional)_ Called after the JS class definition has been registered.
+
+
+</td></tr>
+<tr><td>
+
+[elementWillHydrate(source)?](../fast-element.templatelifecyclecallbacks.elementwillhydrate/)
+
+
+</td><td>
+
+_(Optional)_ Called before an individual element's hydration begins.
 
 
 </td></tr>
@@ -54,7 +87,18 @@ _(Optional)_ Called after the custom element has been defined
 
 </td><td>
 
-_(Optional)_ Called after the template has been assigned to the definition
+_(Optional)_ Called after the template has been assigned to the definition.
+
+
+</td></tr>
+<tr><td>
+
+[templateWillUpdate(name)?](../fast-element.templatelifecyclecallbacks.templatewillupdate/)
+
+
+</td><td>
+
+_(Optional)_ Called before the template has been evaluated and assigned.
 
 
 </td></tr>
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatedidupdate.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatedidupdate.md
index 0dfcebd13c0..ddbaa685d12 100644
--- a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatedidupdate.md
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatedidupdate.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## TemplateLifecycleCallbacks.templateDidUpdate() method
 
-Called after the template has been assigned to the definition
+Called after the template has been assigned to the definition.
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatewillupdate.md b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatewillupdate.md
new file mode 100644
index 00000000000..9d868f45e14
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.templatelifecyclecallbacks.templatewillupdate.md
@@ -0,0 +1,62 @@
+---
+id: "fast-element.templatelifecyclecallbacks.templatewillupdate"
+title: "TemplateLifecycleCallbacks.templateWillUpdate() method"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.templatelifecyclecallbacks.templatewillupdate"
+  parent: "api3xfast-element"
+  title: "TemplateLifecycleCallbacks.templateWillUpdate() method"
+navigationOptions:
+  activeKey: "api3xfast-element.templatelifecyclecallbacks.templatewillupdate"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [TemplateLifecycleCallbacks](../fast-element.templatelifecyclecallbacks/index.html) &gt; [templateWillUpdate](../fast-element.templatelifecyclecallbacks.templatewillupdate/index.html)
+
+## TemplateLifecycleCallbacks.templateWillUpdate() method
+
+Called before the template has been evaluated and assigned.
+
+**Signature:**
+
+```typescript
+templateWillUpdate?(name: string): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+name
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
diff --git a/sites/website/src/docs/3.x/api/fast-element.viewcontroller.ishydrated.md b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.ishydrated.md
new file mode 100644
index 00000000000..a9ac478f22f
--- /dev/null
+++ b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.ishydrated.md
@@ -0,0 +1,24 @@
+---
+id: "fast-element.viewcontroller.ishydrated"
+title: "ViewController.isHydrated property"
+layout: 3x-api
+eleventyNavigation:
+  key: "api3xfast-element.viewcontroller.ishydrated"
+  parent: "api3xfast-element"
+  title: "ViewController.isHydrated property"
+navigationOptions:
+  activeKey: "api3xfast-element.viewcontroller.ishydrated"
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@microsoft/fast-element](../fast-element/index.html) &gt; [ViewController](../fast-element.viewcontroller/index.html) &gt; [isHydrated](../fast-element.viewcontroller.ishydrated/index.html)
+
+## ViewController.isHydrated property
+
+Resolves `true` after prerendered content has been hydrated, `false` when client-side rendered or hydration not enabled.
+
+**Signature:**
+
+```typescript
+readonly isHydrated?: Promise<boolean>;
+```
\ No newline at end of file
diff --git a/sites/website/src/docs/3.x/api/fast-element.viewcontroller.isprerendered.md b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.isprerendered.md
index 284ecc1f0f8..97bca0e4a8f 100644
--- a/sites/website/src/docs/3.x/api/fast-element.viewcontroller.isprerendered.md
+++ b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.isprerendered.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## ViewController.isPrerendered property
 
-A promise that resolves with `true` after prerendered content has been hydrated, or `false` when the view is client-side rendered.
+Resolves `true` when the view's host element had prerendered content (existing shadow root).
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element.viewcontroller.md b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.md
index f0759081098..93ef004f9e5 100644
--- a/sites/website/src/docs/3.x/api/fast-element.viewcontroller.md
+++ b/sites/website/src/docs/3.x/api/fast-element.viewcontroller.md
@@ -49,6 +49,27 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[isHydrated?](../fast-element.viewcontroller.ishydrated/)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+Promise&lt;boolean&gt;
+
+
+</td><td>
+
+_(Optional)_ Resolves `true` after prerendered content has been hydrated, `false` when client-side rendered or hydration not enabled.
+
+
+</td></tr>
+<tr><td>
+
 [isPrerendered?](../fast-element.viewcontroller.isprerendered/)
 
 
@@ -64,7 +85,7 @@ Promise&lt;boolean&gt;
 
 </td><td>
 
-_(Optional)_ A promise that resolves with `true` after prerendered content has been hydrated, or `false` when the view is client-side rendered.
+_(Optional)_ Resolves `true` when the view's host element had prerendered content (existing shadow root).
 
 
 </td></tr>
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate.md
index 624de7844f1..1113deb895c 100644
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate.md
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.declarativetemplate.md
@@ -20,8 +20,45 @@ Returns a declarative template resolver that waits for the matching `<f-template
 **Signature:**
 
 ```typescript
-export declare function declarativeTemplate(): FASTElementTemplateResolver;
+export declare function declarativeTemplate(callbacks?: TemplateLifecycleCallbacks): FASTElementTemplateResolver;
 ```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+callbacks
+
+
+</td><td>
+
+TemplateLifecycleCallbacks
+
+
+</td><td>
+
+_(Optional)_ Optional per-element lifecycle callbacks.
+
+
+</td></tr>
+</tbody></table>
+
 **Returns:**
 
 FASTElementTemplateResolver
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidhydrate.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidhydrate.md
deleted file mode 100644
index d0325b89fdd..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidhydrate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.hydrationlifecyclecallbacks.elementdidhydrate"
-title: "HydrationLifecycleCallbacks.elementDidHydrate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementdidhydrate"
-  parent: "@microsoft/fast-element/declarative.js3x"
-  title: "HydrationLifecycleCallbacks.elementDidHydrate() method"
-navigationOptions:
-  activeKey: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementdidhydrate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [HydrationLifecycleCallbacks](../fast-element.hydrationlifecyclecallbacks/index.html) &gt; [elementDidHydrate](../fast-element.hydrationlifecyclecallbacks.elementdidhydrate/index.html)
-
-## HydrationLifecycleCallbacks.elementDidHydrate() method
-
-Called after an individual element's hydration has finished
-
-**Signature:**
-
-```typescript
-elementDidHydrate?(source: HTMLElement): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-source
-
-
-</td><td>
-
-HTMLElement
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidregister.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidregister.md
deleted file mode 100644
index 40d2661f237..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementdidregister.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.hydrationlifecyclecallbacks.elementdidregister"
-title: "HydrationLifecycleCallbacks.elementDidRegister() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementdidregister"
-  parent: "@microsoft/fast-element/declarative.js3x"
-  title: "HydrationLifecycleCallbacks.elementDidRegister() method"
-navigationOptions:
-  activeKey: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementdidregister"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [HydrationLifecycleCallbacks](../fast-element.hydrationlifecyclecallbacks/index.html) &gt; [elementDidRegister](../fast-element.hydrationlifecyclecallbacks.elementdidregister/index.html)
-
-## HydrationLifecycleCallbacks.elementDidRegister() method
-
-Called after the JS class definition has been registered
-
-**Signature:**
-
-```typescript
-elementDidRegister?(name: string): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-name
-
-
-</td><td>
-
-string
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementwillhydrate.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementwillhydrate.md
deleted file mode 100644
index e9e9dbec30b..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.elementwillhydrate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.hydrationlifecyclecallbacks.elementwillhydrate"
-title: "HydrationLifecycleCallbacks.elementWillHydrate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementwillhydrate"
-  parent: "@microsoft/fast-element/declarative.js3x"
-  title: "HydrationLifecycleCallbacks.elementWillHydrate() method"
-navigationOptions:
-  activeKey: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.elementwillhydrate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [HydrationLifecycleCallbacks](../fast-element.hydrationlifecyclecallbacks/index.html) &gt; [elementWillHydrate](../fast-element.hydrationlifecyclecallbacks.elementwillhydrate/index.html)
-
-## HydrationLifecycleCallbacks.elementWillHydrate() method
-
-Called before an individual element's hydration begins
-
-**Signature:**
-
-```typescript
-elementWillHydrate?(source: HTMLElement): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-source
-
-
-</td><td>
-
-HTMLElement
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.hydrationcomplete.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.hydrationcomplete.md
index be7a5461b5d..7275306424f 100644
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.hydrationcomplete.md
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.hydrationcomplete.md
@@ -15,7 +15,7 @@ navigationOptions:
 
 ## HydrationLifecycleCallbacks.hydrationComplete() method
 
-Called after all elements have completed hydration
+Called after all elements have completed hydration.
 
 **Signature:**
 
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.md
index 15b93ed31ad..258ef42e39a 100644
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.md
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.md
@@ -15,7 +15,12 @@ navigationOptions:
 
 ## HydrationLifecycleCallbacks interface
 
-Lifecycle callbacks for template events. Combines template lifecycle callbacks with template-processing events.
+> Warning: This API is now obsolete.
+> 
+> Use `enableHydration()` and [declarativeTemplate()](../fast-element.declarativetemplate/) callbacks instead.
+> 
+
+Lifecycle callbacks for template events.
 
 **Signature:**
 
@@ -24,6 +29,10 @@ export interface HydrationLifecycleCallbacks extends TemplateLifecycleCallbacks
 ```
 **Extends:** TemplateLifecycleCallbacks
 
+## Remarks
+
+This interface combines template lifecycle callbacks with global hydration events. It is accepted by [TemplateElement.config()](../fast-element.templateelement.config/) for backward compatibility. New code should prefer `enableHydration()` for global hydration events and pass per-element callbacks directly to [declarativeTemplate()](../fast-element.declarativetemplate/)<!-- -->.
+
 ## Methods
 
 <table><thead><tr><th>
@@ -39,45 +48,12 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[elementDidHydrate(source)?](../fast-element.hydrationlifecyclecallbacks.elementdidhydrate/)
-
-
-</td><td>
-
-_(Optional)_ Called after an individual element's hydration has finished
-
-
-</td></tr>
-<tr><td>
-
-[elementDidRegister(name)?](../fast-element.hydrationlifecyclecallbacks.elementdidregister/)
-
-
-</td><td>
-
-_(Optional)_ Called after the JS class definition has been registered
-
-
-</td></tr>
-<tr><td>
-
-[elementWillHydrate(source)?](../fast-element.hydrationlifecyclecallbacks.elementwillhydrate/)
-
-
-</td><td>
-
-_(Optional)_ Called before an individual element's hydration begins
-
-
-</td></tr>
-<tr><td>
-
 [hydrationComplete()?](../fast-element.hydrationlifecyclecallbacks.hydrationcomplete/)
 
 
 </td><td>
 
-_(Optional)_ Called after all elements have completed hydration
+_(Optional)_ Called after all elements have completed hydration.
 
 
 </td></tr>
@@ -91,16 +67,5 @@ _(Optional)_ Called after all elements have completed hydration
 _(Optional)_ Called once when the first element enters the hydration pipeline.
 
 
-</td></tr>
-<tr><td>
-
-[templateWillUpdate(name)?](../fast-element.hydrationlifecyclecallbacks.templatewillupdate/)
-
-
-</td><td>
-
-_(Optional)_ Called before the template has been evaluated and assigned
-
-
 </td></tr>
 </tbody></table>
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.templatewillupdate.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.templatewillupdate.md
deleted file mode 100644
index 8ac36e75b98..00000000000
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.hydrationlifecyclecallbacks.templatewillupdate.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-id: "fast-element.hydrationlifecyclecallbacks.templatewillupdate"
-title: "HydrationLifecycleCallbacks.templateWillUpdate() method"
-layout: 3x-api
-eleventyNavigation:
-  key: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.templatewillupdate"
-  parent: "@microsoft/fast-element/declarative.js3x"
-  title: "HydrationLifecycleCallbacks.templateWillUpdate() method"
-navigationOptions:
-  activeKey: "declarative.jsapi3xfast-element.hydrationlifecyclecallbacks.templatewillupdate"
----
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[@microsoft/fast-element/declarative.js](../fast-element/index.html) &gt; [HydrationLifecycleCallbacks](../fast-element.hydrationlifecyclecallbacks/index.html) &gt; [templateWillUpdate](../fast-element.hydrationlifecyclecallbacks.templatewillupdate/index.html)
-
-## HydrationLifecycleCallbacks.templateWillUpdate() method
-
-Called before the template has been evaluated and assigned
-
-**Signature:**
-
-```typescript
-templateWillUpdate?(name: string): void;
-```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-name
-
-
-</td><td>
-
-string
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-void
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 746117a08ab..fecb8b013df 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
@@ -124,7 +124,7 @@ Creates a FAST element extension that enables declarative attribute mapping for
 </td></tr>
 <tr><td>
 
-[declarativeTemplate()](../fast-element.declarativetemplate/)
+[declarativeTemplate(callbacks)](../fast-element.declarativetemplate/)
 
 
 </td><td>
@@ -199,7 +199,7 @@ A dictionary of element options the TemplateElement will use to update the regis
 
 </td><td>
 
-Lifecycle callbacks for template events. Combines template lifecycle callbacks with template-processing events.
+Lifecycle callbacks for template events.
 
 
 </td></tr>
diff --git a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.templateelement.config.md b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.templateelement.config.md
index d0df85bd18a..a0e9f51598f 100644
--- a/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.templateelement.config.md
+++ b/sites/website/src/docs/3.x/api/fast-element/declarative/fast-element.templateelement.config.md
@@ -15,6 +15,11 @@ navigationOptions:
 
 ## TemplateElement.config() method
 
+> Warning: This API is now obsolete.
+> 
+> Use `enableHydration()` for global hydration events and pass per-element callbacks to [declarativeTemplate()](../fast-element.declarativetemplate/) instead.
+> 
+
 Configure lifecycle callbacks for hydration events.
 
 **Signature:**
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 0352e039dec..125cc7cd1d8 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
@@ -75,7 +75,8 @@ my-app/
 **`main.ts`:**
 
 ```ts
-import { FASTElement, attr, css, observable } from "@microsoft/fast-element";
+import { FASTElement, attr, observable } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
 
 class TaskItem extends FASTElement {
diff --git a/sites/website/src/docs/3.x/declarative-templates/lifecycle-callbacks.md b/sites/website/src/docs/3.x/declarative-templates/lifecycle-callbacks.md
new file mode 100644
index 00000000000..43e15aad443
--- /dev/null
+++ b/sites/website/src/docs/3.x/declarative-templates/lifecycle-callbacks.md
@@ -0,0 +1,179 @@
+---
+id: lifecycle-callbacks
+title: Lifecycle Callbacks
+sidebar_label: Lifecycle Callbacks
+---
+
+# Lifecycle Callbacks
+
+FAST declarative templates provide lifecycle callbacks that hook into the rendering and hydration pipeline. These are useful for performance monitoring, debugging, analytics, and managing loading states.
+
+## Two APIs, Two Scopes
+
+Lifecycle callbacks are split between two APIs based on their scope:
+
+| Scope | API | Callbacks |
+|---|---|---|
+| Per-element | `declarativeTemplate(callbacks)` | `elementDidRegister`, `templateWillUpdate`, `templateDidUpdate`, `elementDidDefine`, `elementWillHydrate`, `elementDidHydrate` |
+| Global | `enableHydration(options)` | `hydrationStarted`, `hydrationComplete` |
+
+## Enabling Hydration
+
+Hydration is **opt-in**. Import and call `enableHydration()` before any FAST elements connect:
+
+```typescript
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+
+enableHydration({
+    hydrationStarted() {
+        console.log("First element is hydrating");
+    },
+    hydrationComplete() {
+        console.log("All elements hydrated");
+    },
+});
+```
+
+Without calling `enableHydration()`, prerendered content is discarded and elements render client-side.
+
+## Per-Element Callbacks
+
+Pass lifecycle callbacks directly to `declarativeTemplate()`:
+
+```typescript
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementDidRegister(name) {
+            console.log(`${name} registered`);
+        },
+        templateWillUpdate(name) {
+            console.log(`${name} template updating`);
+        },
+        templateDidUpdate(name) {
+            console.log(`${name} template updated`);
+        },
+        elementDidDefine(name) {
+            console.log(`${name} fully defined`);
+        },
+        elementWillHydrate(source) {
+            console.log(`${source.localName} starting hydration`);
+        },
+        elementDidHydrate(source) {
+            console.log(`${source.localName} hydrated`);
+        },
+    }),
+});
+```
+
+Each component type gets its own set of callbacks. Different elements can have different callbacks.
+
+## Execution Order
+
+Callbacks fire in the following order for each element:
+
+```
+1. elementDidRegister(name)       — JS class registered
+2. templateWillUpdate(name)       — before template is parsed
+3. templateDidUpdate(name)        — after template is assigned
+4. elementDidDefine(name)         — after customElements.define()
+5. hydrationStarted()             — once, on first hydrating element
+6. elementWillHydrate(source)     — before element hydrates
+7. [Hydration occurs]
+8. elementDidHydrate(source)      — after element hydrates
+9. hydrationComplete()            — once, after all elements finish
+```
+
+Steps 5–9 only fire when `enableHydration()` has been called and the element has prerendered content.
+
+> **Note:** Template processing is asynchronous. Callbacks for different elements may interleave.
+
+## Examples
+
+### Performance Monitoring
+
+```typescript
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+
+enableHydration({
+    hydrationStarted() {
+        performance.mark("hydration:started");
+    },
+    hydrationComplete() {
+        performance.measure("hydration:total", "hydration:started");
+    },
+});
+
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementWillHydrate(source) {
+            performance.mark(`${source.localName}:hydrate:start`);
+        },
+        elementDidHydrate(source) {
+            performance.measure(
+                `${source.localName}:hydrate`,
+                `${source.localName}:hydrate:start`,
+            );
+        },
+    }),
+});
+```
+
+### Loading State Management
+
+```typescript
+enableHydration({
+    hydrationStarted() {
+        document.body.classList.add("hydrating");
+    },
+    hydrationComplete() {
+        document.body.classList.remove("hydrating");
+        document.body.classList.add("interactive");
+    },
+});
+```
+
+### Declarative Template Without Hydration
+
+Lifecycle callbacks work even without hydration — the template-related callbacks still fire:
+
+```typescript
+// No enableHydration() call needed for template callbacks
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementDidDefine(name) {
+            console.log(`${name} is ready`);
+        },
+    }),
+});
+```
+
+In this case, `elementWillHydrate` and `elementDidHydrate` will never fire, and the element renders client-side.
+
+## `isPrerendered` vs `isHydrated`
+
+In addition to lifecycle callbacks, the controller exposes two promise-based properties for inspecting the rendering path:
+
+- **`isPrerendered: Promise<boolean>`** — resolves `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran.
+- **`isHydrated: Promise<boolean>`** — resolves `true` only when hydration actually ran successfully.
+
+```typescript
+const controller = this.$fastController;
+const prerendered = await controller.isPrerendered;
+const hydrated = await controller.isHydrated;
+
+if (prerendered && hydrated) {
+    // Element had DSD and was hydrated
+} else if (prerendered && !hydrated) {
+    // Had DSD but hydration wasn't enabled — fell back to client-side render
+} else {
+    // No DSD — normal client-side render
+}
+```
+
+This distinction is useful when hydration is conditionally enabled or when you need to differentiate between "had prerendered content" and "successfully reused that content."
diff --git a/sites/website/src/docs/3.x/declarative-templates/server-rendering.md b/sites/website/src/docs/3.x/declarative-templates/server-rendering.md
index b17a456f241..a54e4f3df27 100644
--- a/sites/website/src/docs/3.x/declarative-templates/server-rendering.md
+++ b/sites/website/src/docs/3.x/declarative-templates/server-rendering.md
@@ -78,7 +78,7 @@ The end-to-end flow from server to interactive page follows these steps:
 6. **Interactive** — The page is fully interactive. Property changes trigger targeted DOM updates.
 
 :::tip
-The `isPrerendered` property on `$fastController` is a `Promise<boolean>` that resolves to `true` after hydration completes, or `false` for client-side rendered elements. Use this to detect when the page is fully interactive.
+The controller exposes two properties: `isPrerendered` resolves `true` when the element had a declarative shadow root at connect time, while `isHydrated` resolves `true` only when hydration actually ran successfully. Use these to detect how the element was rendered and when it is fully interactive.
 :::
 
 ## State Propagation
diff --git a/sites/website/src/docs/3.x/getting-started/css-templates.md b/sites/website/src/docs/3.x/getting-started/css-templates.md
index 68dbe2cf7c7..92f0c055b23 100644
--- a/sites/website/src/docs/3.x/getting-started/css-templates.md
+++ b/sites/website/src/docs/3.x/getting-started/css-templates.md
@@ -16,11 +16,12 @@ keywords:
 
 # CSS Templates
 
-The `@microsoft/fast-element` package offers a named export `css` which is a [tag template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). It can be used to create CSS snippets which will become your web components CSS. These styles are [adoptedStylesheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets) and associated with the `ShadowRoot`, they therefore do not affect styling in the rest of the document. To share styles between a document and web components, we suggest using [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
+The `@microsoft/fast-element/styles.js` module offers a named export `css` which is a [tag template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). It can be used to create CSS snippets which will become your web components CSS. These styles are [adoptedStylesheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets) and associated with the `ShadowRoot`, they therefore do not affect styling in the rest of the document. To share styles between a document and web components, we suggest using [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
 
 **Example:**
 ```ts
-import { FASTElement, attr, css, html } from '@microsoft/fast-element';
+import { FASTElement, attr, html } from '@microsoft/fast-element';
+import { css } from "@microsoft/fast-element/styles.js";
 
 const template = html`
   <span>${x => x.greeting.toUpperCase()}</span>
diff --git a/sites/website/src/docs/3.x/getting-started/fast-element.md b/sites/website/src/docs/3.x/getting-started/fast-element.md
index 6d7153354bd..876818f78bb 100644
--- a/sites/website/src/docs/3.x/getting-started/fast-element.md
+++ b/sites/website/src/docs/3.x/getting-started/fast-element.md
@@ -245,7 +245,8 @@ A typical configuration will at least include `name`, `template`, and `styles`.
 
 **Example:**
 ```ts
-import { attr, css, FASTElement, html } from "@microsoft/fast-element";
+import { attr, FASTElement, html } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 const template = html`<span>Hello ${x => x.name}!</span>`
 
diff --git a/sites/website/src/docs/3.x/getting-started/quick-start.md b/sites/website/src/docs/3.x/getting-started/quick-start.md
index 3262abf8201..09dbfde62a7 100644
--- a/sites/website/src/docs/3.x/getting-started/quick-start.md
+++ b/sites/website/src/docs/3.x/getting-started/quick-start.md
@@ -27,7 +27,8 @@ A web component created using FAST is comprised of 3 parts, the HTML template, t
 
 To start, let's create a simple web component that combines all the necessary parts:
 ```typescript
-import { attr, css, FASTElement, html } from "@microsoft/fast-element";
+import { attr, FASTElement, html } from "@microsoft/fast-element";
+import { css } from "@microsoft/fast-element/styles.js";
 
 /**
  * Create an HTML template using the html tag template literal,
diff --git a/sites/website/src/docs/3.x/migration-guide.md b/sites/website/src/docs/3.x/migration-guide.md
index 70dd753456c..2dc42da4592 100644
--- a/sites/website/src/docs/3.x/migration-guide.md
+++ b/sites/website/src/docs/3.x/migration-guide.md
@@ -28,7 +28,19 @@ import { HydratableElementController } from "@microsoft/fast-element";
 HydratableElementController.install();
 ```
 
-3.x: No replacement needed — prerendered content detection is automatic.
+3.x: Hydration is now opt-in via `enableHydration()`:
+
+```ts
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+
+enableHydration();
+```
+
+Remove any `import "@microsoft/fast-element/install-hydration.js"` side-effect
+imports as part of the migration. The older
+`install-hydratable-view-templates.js` helper remains available for advanced
+use cases, but `@microsoft/fast-element/declarative.js` now installs hydration
+support lazily when declarative APIs create a template.
 
 ### `needsHydrationAttribute` and `deferHydrationAttribute` removed
 
@@ -48,7 +60,7 @@ These attributes are no longer needed in server-rendered markup.
 </my-component>
 ```
 
-### `HydrationControllerCallbacks` replaced by `ElementHydrationCallbacks`
+### `HydrationControllerCallbacks` replaced by `enableHydration` + `declarativeTemplate` callbacks
 
 2.x Example:
 ```ts
@@ -61,30 +73,41 @@ HydratableElementController.config({
 
 3.x Example:
 ```ts
-import { ElementController } from "@microsoft/fast-element";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
 
-ElementController.configHydration({
+// Global hydration callbacks
+enableHydration({
     hydrationStarted() { /* ... */ },
-    elementWillHydrate(source: HTMLElement) { /* ... */ },
-    elementDidHydrate(source: HTMLElement) { /* ... */ },
-    hydrationComplete() { /* ... */ }
+    hydrationComplete() { /* ... */ },
+});
+
+// Per-element hydration callbacks
+MyComponent.define({
+    name: "my-component",
+    template: declarativeTemplate({
+        elementWillHydrate(source: HTMLElement) { /* ... */ },
+        elementDidHydrate(source: HTMLElement) { /* ... */ },
+    }),
 });
 ```
 
 Note: `elementWillHydrate` and `elementDidHydrate` now receive the `HTMLElement` instance instead of a string name.
 
-### `isPrerendered` is a `Promise<boolean>`
+### `isPrerendered` and `isHydrated` split
 
-The `isPrerendered` property on `ElementController` and `ViewController` is a `Promise<boolean>` that resolves after hydration completes (or immediately with `false` for client-side rendered components).
+The `isPrerendered` property on `ElementController` and `ViewController` now resolves `true` when the element had a declarative shadow root (DSD) at connect time, regardless of whether hydration ran. A new `isHydrated: Promise<boolean>` property resolves `true` only when hydration actually ran successfully.
 
 ```ts
 connectedCallback() {
     super.connectedCallback();
-    this.$fastController.isPrerendered.then(prerendered => {
-        if (!prerendered) {
-            this.fetchData();
-        }
-    });
+    const ctrl = this.$fastController;
+    const prerendered = await ctrl.isPrerendered;
+    const hydrated = await ctrl.isHydrated;
+
+    if (prerendered && !hydrated) {
+        // Had DSD but hydration wasn't enabled
+    }
 }
 ```
 
@@ -103,8 +126,27 @@ import { TemplateElement } from "@microsoft/fast-element/declarative.js";
 import { deepMerge } from "@microsoft/fast-element/declarative/utilities.js";
 ```
 
-This keeps the root `@microsoft/fast-element` import free of declarative
-side effects while moving the declarative runtime into the same package.
+Keep importing core FAST Element APIs from `@microsoft/fast-element`. The
+dedicated declarative entrypoint owns the declarative runtime and installs
+hydration support lazily when declarative templates are created.
+
+### `debug.js` requires explicit enablement
+
+`@microsoft/fast-element/debug.js` no longer configures FAST just by being
+imported. Call `enableDebug()` explicitly instead:
+
+```ts
+// Before
+import "@microsoft/fast-element/debug.js";
+
+// After
+import { enableDebug } from "@microsoft/fast-element/debug.js";
+
+enableDebug();
+```
+
+If you want debug behavior enabled automatically, keep using the root package
+`development` export or the debug rollup bundle.
 
 ### `RenderableFASTElement` removed (`@microsoft/fast-html`)
 
@@ -173,7 +215,81 @@ class MyComponent extends FASTElement {
 
 ### `ViewTemplate.render()` signature unchanged
 
-The `isPrerendered` parameter that was briefly added to `ViewTemplate.render()` has been removed. The prerendered path is handled entirely by `ElementController.renderPrerendered()`.
+The `isPrerendered` parameter that was briefly added to `ViewTemplate.render()` has been removed. The prerendered path is handled entirely by the pluggable hydration hook installed via `ElementController.installHydrationHook()`.
+
+### `globalThis.FAST` removed
+
+The `FAST` object is no longer attached to `globalThis`. It is now a module-scoped export from `@microsoft/fast-element`.
+
+2.x Example:
+```ts
+globalThis.FAST.addMessages({ ... });
+```
+
+3.x Example:
+```ts
+import { FAST } from "@microsoft/fast-element";
+
+FAST.addMessages({ ... });
+```
+
+### `FAST.getById()` removed
+
+The `FAST.getById(id, initializer)` slot registry has been removed. Kernel services (update queue, observable system, etc.) are resolved through standard ES module imports.
+
+### `FASTGlobal` type removed
+
+The `FASTGlobal` interface type has been removed. Code that referenced this type should be updated to use the `FAST` export directly.
+
+### `KernelServiceId` enum removed
+
+The `KernelServiceId` enum (used with `FAST.getById()`) has been removed. Import kernel services directly from their respective modules.
+
+### `css` and style APIs moved to `@microsoft/fast-element/styles.js`
+
+`css`, `ElementStyles`, `CSSDirective`, `cssDirective`, `ComposableStyles`, `HostBehavior`, `HostController`, `StyleStrategy`, and `StyleTarget` are no longer exported from the main `@microsoft/fast-element` barrel.
+
+2.x Example:
+```ts
+import { css, ElementStyles } from "@microsoft/fast-element";
+```
+
+3.x Example:
+```ts
+import { css, ElementStyles } from "@microsoft/fast-element/styles.js";
+```
+
+### Array observation moved to `@microsoft/fast-element/arrays.js`
+
+`ArrayObserver`, `Splice`, `SpliceStrategy`, `SpliceStrategySupport`, `lengthOf`, `sortedCount`, and `Sort` are now imported from `@microsoft/fast-element/arrays.js`.
+
+2.x Example:
+```ts
+import { ArrayObserver } from "@microsoft/fast-element";
+```
+
+3.x Example:
+```ts
+import { ArrayObserver } from "@microsoft/fast-element/arrays.js";
+```
+
+### `deferHydrationAttribute` moved to `@microsoft/fast-element/hydration.js`
+
+`deferHydrationAttribute` is no longer available from the main barrel. Import it from the hydration subpath.
+
+2.x Example:
+```ts
+import { deferHydrationAttribute } from "@microsoft/fast-element";
+```
+
+3.x Example:
+```ts
+import { deferHydrationAttribute } from "@microsoft/fast-element/hydration.js";
+```
+
+### `requestIdleCallback` polyfill removed
+
+The built-in `requestIdleCallback` / `cancelIdleCallback` polyfill has been removed. If your application targets environments without these APIs, provide your own polyfill.
 
 ### Hydration marker format changed
 
@@ -195,8 +311,10 @@ The `HydrationMarkup` API methods have been renamed (e.g., `parseAttributeBindin
 
 | Export | Package | Description |
 |---|---|---|
-| `ElementController.isPrerendered` | `fast-element` | `Promise<boolean>` — resolves after hydration |
-| `ElementController.configHydration()` | `fast-element` | Registers hydration lifecycle callbacks |
+| `ElementController.isPrerendered` | `fast-element` | `Promise<boolean>` — resolves `true` when element had DSD at connect time |
+| `ElementController.isHydrated` | `fast-element` | `Promise<boolean>` — resolves `true` only when hydration ran successfully |
+| `enableHydration()` | `fast-element/hydration.js` | Enables hydration support for FAST elements |
 | `HydrationTracker` | `fast-element` | Standalone hydration lifecycle tracker class |
-| `ElementHydrationCallbacks` | `fast-element` | Type for hydration lifecycle callbacks |
-| `ViewController.isPrerendered` | `fast-element` | `Promise<boolean>` — available to custom directives |
+| `HydrationOptions` | `fast-element/hydration.js` | Type for hydration configuration options |
+| `ViewController.isPrerendered` | `fast-element` | `Promise<boolean>` — DSD detection for custom directives |
+| `ViewController.isHydrated` | `fast-element` | `Promise<boolean>` — hydration status for custom directives |
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 741e917a572..35dfd8d13a4 100644
--- a/sites/website/src/docs/3.x/resources/export-sizes.md
+++ b/sites/website/src/docs/3.x/resources/export-sizes.md
@@ -19,17 +19,22 @@ Bundle sizes for `@microsoft/fast-element` exports.
 
 | Export | Minified | Gzip | Brotli |
 |--------|----------|------|--------|
-| CDN Rollup Bundle | 65.46 KB | 19.45 KB | 17.44 KB |
-| FASTElement | 25.69 KB | 7.98 KB | 7.22 KB |
-| Updates | 3.13 KB | 1.28 KB | 1.09 KB |
-| Observable | 7.65 KB | 2.79 KB | 2.51 KB |
-| observable | 7.68 KB | 2.81 KB | 2.53 KB |
-| attr | 1.28 KB | 634 B | 552 B |
-| children | 5.68 KB | 2.19 KB | 1.95 KB |
-| css | 2.36 KB | 1.05 KB | 964 B |
-| ref | 4.65 KB | 1.86 KB | 1.63 KB |
-| slotted | 5.46 KB | 2.12 KB | 1.87 KB |
-| volatile | 7.74 KB | 2.83 KB | 2.54 KB |
-| when | 1.99 KB | 770 B | 625 B |
-| html | 26.82 KB | 8.77 KB | 7.88 KB |
-| repeat | 30.48 KB | 9.70 KB | 8.74 KB |
+| CDN Rollup Bundle | 65.07 KB | 19.35 KB | 17.29 KB |
+| FASTElement | 23.71 KB | 7.37 KB | 6.63 KB |
+| Updates | 473 B | 337 B | 287 B |
+| Observable | 6.70 KB | 2.49 KB | 2.22 KB |
+| observable | 6.74 KB | 2.50 KB | 2.24 KB |
+| attr | 477 B | 288 B | 244 B |
+| children | 4.81 KB | 1.86 KB | 1.64 KB |
+| ref | 3.78 KB | 1.53 KB | 1.33 KB |
+| slotted | 4.60 KB | 1.79 KB | 1.58 KB |
+| volatile | 6.79 KB | 2.53 KB | 2.25 KB |
+| when | 1.82 KB | 712 B | 568 B |
+| html | 25.92 KB | 8.50 KB | 7.61 KB |
+| repeat | 29.57 KB | 9.42 KB | 8.47 KB |
+| css | 2.43 KB | 1.00 KB | 911 B |
+| enableHydration | 43.23 KB | 13.21 KB | 11.88 KB |
+| ArrayObserver | 12.51 KB | 4.45 KB | 4.01 KB |
+| declarativeTemplate | 85.68 KB | 26.22 KB | 23.09 KB |
+| observerMap | 339 B | 209 B | 179 B |
+| attributeMap | 341 B | 209 B | 178 B |