@microsoft/fast-element 2.0.0-beta.9 → 2.0.1

package/dist/fast-element.js

@@ -1,10 +1,73 @@
+let kernelMode;
+const kernelAttr = "fast-kernel";
+try {
+    if (document.currentScript) {
+        kernelMode = document.currentScript.getAttribute(kernelAttr);
+    }
+    else {
+        const scripts = document.getElementsByTagName("script");
+        const currentScript = scripts[scripts.length - 1];
+        kernelMode = currentScript.getAttribute(kernelAttr);
+    }
+}
+catch (e) {
+    kernelMode = "isolate";
+}
+let KernelServiceId;
+switch (kernelMode) {
+    case "share": // share the kernel across major versions
+        KernelServiceId = Object.freeze({
+            updateQueue: 1,
+            observable: 2,
+            contextEvent: 3,
+            elementRegistry: 4,
+        });
+        break;
+    case "share-v2": // only share the kernel with other v2 instances
+        KernelServiceId = Object.freeze({
+            updateQueue: 1.2,
+            observable: 2.2,
+            contextEvent: 3.2,
+            elementRegistry: 4.2,
+        });
+        break;
+    default:
+        // fully isolate the kernel from all other FAST instances
+        const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
+        KernelServiceId = Object.freeze({
+            updateQueue: `1.2${postfix}`,
+            observable: `2.2${postfix}`,
+            contextEvent: `3.2${postfix}`,
+            elementRegistry: `4.2${postfix}`,
+        });
+        break;
+}
+/**
+ * Determines whether or not an object is a function.
+ * @public
+ */
+const isFunction = (object) => typeof object === "function";
+/**
+ * Determines whether or not an object is a string.
+ * @public
+ */
+const isString = (object) => typeof object === "string";
+/**
+ * A function which does nothing.
+ * @public
+ */
+const noop = () => void 0;
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 (function ensureGlobalThis() {
     if (typeof globalThis !== "undefined") {
         // We're running in a modern environment.
         return;
     }
+    // @ts-ignore
     if (typeof global !== "undefined") {
         // We're running in NodeJS
+        // @ts-ignore
         global.globalThis = global;
     }
     else if (typeof self !== "undefined") {
@@ -22,69 +85,8 @@
         result.globalThis = result;
     }
 })();
-// API-only Polyfill for trustedTypes
-if (!globalThis.trustedTypes) {
-    globalThis.trustedTypes = {
-        createPolicy: (n, r) => r,
-    };
-}
-// ensure FAST global - duplicated in platform.ts
-const propConfig$1 = {
-    configurable: false,
-    enumerable: false,
-    writable: false,
-};
-if (globalThis.FAST === void 0) {
-    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig$1));
-}
-const FAST$1 = globalThis.FAST;
-if (FAST$1.getById === void 0) {
-    const storage = Object.create(null);
-    Reflect.defineProperty(FAST$1, "getById", Object.assign({ value(id, initialize) {
-            let found = storage[id];
-            if (found === void 0) {
-                found = initialize ? (storage[id] = initialize()) : null;
-            }
-            return found;
-        } }, propConfig$1));
-}
-// duplicated from DOM
-const supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
-    "replace" in CSSStyleSheet.prototype;
-function usableStyleTarget(target) {
-    return target === document ? document.body : target;
-}
-let id$1 = 0;
-const nextStyleId = () => `fast-${++id$1}`;
-class StyleElementStrategy {
-    constructor(styles) {
-        this.styles = styles;
-        this.styleClass = nextStyleId();
-    }
-    addStylesTo(target) {
-        target = usableStyleTarget(target);
-        const styles = this.styles;
-        const styleClass = this.styleClass;
-        for (let i = 0; i < styles.length; i++) {
-            const element = document.createElement("style");
-            element.innerHTML = styles[i];
-            element.className = styleClass;
-            target.append(element);
-        }
-    }
-    removeStylesFrom(target) {
-        const styles = target.querySelectorAll(`.${this.styleClass}`);
-        target = usableStyleTarget(target);
-        for (let i = 0, ii = styles.length; i < ii; ++i) {
-            target.removeChild(styles[i]);
-        }
-    }
-}
-if (!supportsAdoptedStyleSheets) {
-    FAST$1.getById(/* KernelServiceId.styleSheetStrategy */ 5, () => StyleElementStrategy);
-}
 
-// ensure FAST global - duplicated in polyfills.ts and debug.ts
+// ensure FAST global - duplicated debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
@@ -95,7 +97,7 @@ if (globalThis.FAST === void 0) {
 }
 /**
  * The FAST global.
- * @internal
+ * @public
  */
 const FAST = globalThis.FAST;
 if (FAST.getById === void 0) {
@@ -171,21 +173,462 @@ function createMetadataLocator() {
         return metadata;
     };
 }
-
 /**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
  * @internal
  */
-const isFunction = (object) => typeof object === "function";
+function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}
+
 /**
- * @internal
+ * The type of HTML aspect to target.
+ * @public
  */
-const isString = (object) => typeof object === "string";
+const DOMAspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+    /**
+     * An attribute.
+     */
+    attribute: 1,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute: 2,
+    /**
+     * A property.
+     */
+    property: 3,
+    /**
+     * Content
+     */
+    content: 4,
+    /**
+     * A token list.
+     */
+    tokenList: 5,
+    /**
+     * An event.
+     */
+    event: 6,
+});
+const createHTML$1 = html => html;
+const fastTrustedType = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML: createHTML$1 })
+    : { createHTML: createHTML$1 };
+let defaultPolicy = Object.freeze({
+    createHTML(value) {
+        return fastTrustedType.createHTML(value);
+    },
+    protect(tagName, aspect, aspectName, sink) {
+        return sink;
+    },
+});
+const fastPolicy = defaultPolicy;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+const DOM = Object.freeze({
+    /**
+     * Gets the dom policy used by the templating system.
+     */
+    get policy() {
+        return defaultPolicy;
+    },
+    /**
+     * Sets the dom policy used by the templating system.
+     * @param policy - The policy to set.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setPolicy(value) {
+        if (defaultPolicy !== fastPolicy) {
+            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
+        }
+        defaultPolicy = value;
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});
+
+function safeURL(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        if (isString(value)) {
+            value = value.replace(/(javascript:|vbscript:|data:)/, "");
+        }
+        sink(target, name, value, ...rest);
+    };
+}
+function block(tagName, aspect, aspectName, sink) {
+    throw FAST.error(1209 /* Message.blockedByDOMPolicy */, {
+        aspectName,
+        tagName: tagName !== null && tagName !== void 0 ? tagName : "text",
+    });
+}
+const defaultDOMElementGuards = {
+    a: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    area: {
+        [DOMAspect.attribute]: {
+            href: safeURL,
+        },
+        [DOMAspect.property]: {
+            href: safeURL,
+        },
+    },
+    button: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    embed: {
+        [DOMAspect.attribute]: {
+            src: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+        },
+    },
+    form: {
+        [DOMAspect.attribute]: {
+            action: safeURL,
+        },
+        [DOMAspect.property]: {
+            action: safeURL,
+        },
+    },
+    frame: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+        },
+    },
+    iframe: {
+        [DOMAspect.attribute]: {
+            src: safeURL,
+        },
+        [DOMAspect.property]: {
+            src: safeURL,
+            srcdoc: block,
+        },
+    },
+    input: {
+        [DOMAspect.attribute]: {
+            formaction: safeURL,
+        },
+        [DOMAspect.property]: {
+            formAction: safeURL,
+        },
+    },
+    link: {
+        [DOMAspect.attribute]: {
+            href: block,
+        },
+        [DOMAspect.property]: {
+            href: block,
+        },
+    },
+    object: {
+        [DOMAspect.attribute]: {
+            codebase: block,
+            data: block,
+        },
+        [DOMAspect.property]: {
+            codeBase: block,
+            data: block,
+        },
+    },
+    script: {
+        [DOMAspect.attribute]: {
+            src: block,
+            text: block,
+        },
+        [DOMAspect.property]: {
+            src: block,
+            text: block,
+            innerText: block,
+            textContent: block,
+        },
+    },
+    style: {
+        [DOMAspect.property]: {
+            innerText: block,
+            textContent: block,
+        },
+    },
+};
+const blockedEvents = {
+    onabort: block,
+    onauxclick: block,
+    onbeforeinput: block,
+    onbeforematch: block,
+    onblur: block,
+    oncancel: block,
+    oncanplay: block,
+    oncanplaythrough: block,
+    onchange: block,
+    onclick: block,
+    onclose: block,
+    oncontextlost: block,
+    oncontextmenu: block,
+    oncontextrestored: block,
+    oncopy: block,
+    oncuechange: block,
+    oncut: block,
+    ondblclick: block,
+    ondrag: block,
+    ondragend: block,
+    ondragenter: block,
+    ondragleave: block,
+    ondragover: block,
+    ondragstart: block,
+    ondrop: block,
+    ondurationchange: block,
+    onemptied: block,
+    onended: block,
+    onerror: block,
+    onfocus: block,
+    onformdata: block,
+    oninput: block,
+    oninvalid: block,
+    onkeydown: block,
+    onkeypress: block,
+    onkeyup: block,
+    onload: block,
+    onloadeddata: block,
+    onloadedmetadata: block,
+    onloadstart: block,
+    onmousedown: block,
+    onmouseenter: block,
+    onmouseleave: block,
+    onmousemove: block,
+    onmouseout: block,
+    onmouseover: block,
+    onmouseup: block,
+    onpaste: block,
+    onpause: block,
+    onplay: block,
+    onplaying: block,
+    onprogress: block,
+    onratechange: block,
+    onreset: block,
+    onresize: block,
+    onscroll: block,
+    onsecuritypolicyviolation: block,
+    onseeked: block,
+    onseeking: block,
+    onselect: block,
+    onslotchange: block,
+    onstalled: block,
+    onsubmit: block,
+    onsuspend: block,
+    ontimeupdate: block,
+    ontoggle: block,
+    onvolumechange: block,
+    onwaiting: block,
+    onwebkitanimationend: block,
+    onwebkitanimationiteration: block,
+    onwebkitanimationstart: block,
+    onwebkittransitionend: block,
+    onwheel: block,
+};
+const defaultDOMGuards = {
+    elements: defaultDOMElementGuards,
+    aspects: {
+        [DOMAspect.attribute]: Object.assign({}, blockedEvents),
+        [DOMAspect.property]: Object.assign({ innerHTML: block }, blockedEvents),
+        [DOMAspect.event]: Object.assign({}, blockedEvents),
+    },
+};
+function createDomSinkGuards(config, defaults) {
+    const result = {};
+    for (const name in defaults) {
+        const overrideValue = config[name];
+        const defaultValue = defaults[name];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[name] = defaultValue;
+                break;
+            default:
+                // override the default
+                result[name] = overrideValue;
+                break;
+        }
+    }
+    // add any new sinks that were not overrides
+    for (const name in config) {
+        if (!(name in result)) {
+            result[name] = config[name];
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMAspectGuards(config, defaults) {
+    const result = {};
+    for (const aspect in defaults) {
+        const overrideValue = config[aspect];
+        const defaultValue = defaults[aspect];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[aspect] = createDomSinkGuards(defaultValue, {});
+                break;
+            default:
+                // override the default
+                result[aspect] = createDomSinkGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // add any new aspect guards that were not overrides
+    for (const aspect in config) {
+        if (!(aspect in result)) {
+            result[aspect] = createDomSinkGuards(config[aspect], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createElementGuards(config, defaults) {
+    const result = {};
+    for (const tag in defaults) {
+        const overrideValue = config[tag];
+        const defaultValue = defaults[tag];
+        switch (overrideValue) {
+            case null:
+                // remove the default
+                break;
+            case undefined:
+                // keep the default
+                result[tag] = createDOMAspectGuards(overrideValue, {});
+                break;
+            default:
+                // override the default aspects
+                result[tag] = createDOMAspectGuards(overrideValue, defaultValue);
+                break;
+        }
+    }
+    // Add any new element guards that were not overrides
+    for (const tag in config) {
+        if (!(tag in result)) {
+            result[tag] = createDOMAspectGuards(config[tag], {});
+        }
+    }
+    return Object.freeze(result);
+}
+function createDOMGuards(config, defaults) {
+    return Object.freeze({
+        elements: config.elements
+            ? createElementGuards(config.elements, defaults.elements)
+            : defaults.elements,
+        aspects: config.aspects
+            ? createDOMAspectGuards(config.aspects, defaults.aspects)
+            : defaults.aspects,
+    });
+}
+function createTrustedType() {
+    const createHTML = html => html;
+    return globalThis.trustedTypes
+        ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+        : { createHTML };
+}
+function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
+    const sinkGuards = aspectGuards[aspect];
+    if (sinkGuards) {
+        const guard = sinkGuards[aspectName];
+        if (guard) {
+            return guard(tagName, aspect, aspectName, sink);
+        }
+    }
+}
+/**
+ * A helper for creating DOM policies.
+ * @public
+ */
+const DOMPolicy = Object.freeze({
+    /**
+     * Creates a new DOM Policy object.
+     * @param options The options to use in creating the policy.
+     * @returns The newly created DOMPolicy.
+     */
+    create(options = {}) {
+        var _a, _b;
+        const trustedType = (_a = options.trustedType) !== null && _a !== void 0 ? _a : createTrustedType();
+        const guards = createDOMGuards((_b = options.guards) !== null && _b !== void 0 ? _b : {}, defaultDOMGuards);
+        return Object.freeze({
+            createHTML(value) {
+                return trustedType.createHTML(value);
+            },
+            protect(tagName, aspect, aspectName, sink) {
+                var _a;
+                // Check for element-specific guards.
+                const key = (tagName !== null && tagName !== void 0 ? tagName : "").toLowerCase();
+                const elementGuards = guards.elements[key];
+                if (elementGuards) {
+                    const guard = tryGuard(elementGuards, tagName, aspect, aspectName, sink);
+                    if (guard) {
+                        return guard;
+                    }
+                }
+                // Check for guards applicable to all nodes.
+                return ((_a = tryGuard(guards.aspects, tagName, aspect, aspectName, sink)) !== null && _a !== void 0 ? _a : sink);
+            },
+        });
+    },
+});
 
 /**
  * The default UpdateQueue.
  * @public
  */
-const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
     const tasks = [];
     const pendingErrors = [];
     const rAF = globalThis.requestAnimationFrame;
@@ -431,9 +874,9 @@ const SourceLifetime = Object.freeze({
  * Common Observable APIs.
  * @public
  */
-const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if)/;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
@@ -476,9 +919,9 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         }
     }
     class ExpressionNotifierImplementation extends SubscriberSet {
-        constructor(binding, initialSubscriber, isVolatileBinding = false) {
-            super(binding, initialSubscriber);
-            this.binding = binding;
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
@@ -518,13 +961,17 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             this.needsRefresh = this.isVolatileBinding;
             let result;
             try {
-                result = this.binding(source, context);
+                result = this.expression(source, context);
             }
             finally {
                 watcher = previousWatcher;
             }
             return result;
         }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
         dispose() {
             if (this.last !== null) {
                 let current = this.first;
@@ -586,6 +1033,7 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             }
         }
     }
+    makeSerializationNoop(ExpressionNotifierImplementation);
     return Object.freeze({
         /**
          * @internal
@@ -653,20 +1101,20 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         /**
          * Creates a {@link ExpressionNotifier} that can watch the
          * provided {@link Expression} for changes.
-         * @param binding - The binding to observe.
+         * @param expression - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
-        binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
          * on every evaluation of the value.
-         * @param binding - The binding to inspect.
+         * @param expression - The binding to inspect.
          */
-        isVolatileBinding(binding) {
-            return volatileRegex.test(binding.toString());
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.toString());
         },
     });
 });
@@ -694,7 +1142,7 @@ function volatile(target, name, descriptor) {
         },
     });
 }
-const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
     let current = null;
     return {
         get() {
@@ -1109,7 +1557,7 @@ let defaultSpliceStrategy = Object.freeze({
             if (changes === void 0) {
                 return emptyArray;
             }
-            return changes.length > 1 ? project(current, changes) : changes;
+            return project(current, changes);
         }
         return resetSplices;
     },
@@ -1309,21 +1757,102 @@ function lengthOf(array) {
     return array.length;
 }
 
-const styleSheetCache = new Map();
-let DefaultStyleStrategy;
-function reduceStyles(styles) {
-    return styles
-        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
-        .reduce((prev, curr) => prev.concat(curr), []);
-}
 /**
- * Represents styles that can be applied to a custom element.
+ * Captures a binding expression along with related information and capabilities.
+ *
  * @public
  */
-class ElementStyles {
+class Binding {
     /**
-     * Creates an instance of ElementStyles.
-     * @param styles - The styles that will be associated with elements.
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param policy - The security policy to associate with this binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, policy, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.policy = policy;
+        this.isVolatile = isVolatile;
+    }
+}
+
+class OneWayBinding extends Binding {
+    createObserver(subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+/**
+ * Creates an standard binding.
+ * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneWay(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OneWayBinding(expression, policy, isVolatile);
+}
+/**
+ * Creates an event listener binding.
+ * @param expression - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+function listener(expression, options) {
+    const config = new OneWayBinding(expression);
+    config.options = options;
+    return config;
+}
+
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
+}
+makeSerializationNoop(OneTimeBinding);
+/**
+ * Creates a one time binding
+ * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
+}
+
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+function normalizeBinding$1(value) {
+    return isFunction(value)
+        ? oneWay(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}
+
+let DefaultStyleStrategy;
+function reduceStyles(styles) {
+    return styles
+        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
+        .reduce((prev, curr) => prev.concat(curr), []);
+}
+/**
+ * Represents styles that can be applied to a custom element.
+ * @public
+ */
+class ElementStyles {
+    /**
+     * Creates an instance of ElementStyles.
+     * @param styles - The styles that will be associated with elements.
      */
     constructor(styles) {
         this.styles = styles;
@@ -1400,36 +1929,6 @@ class ElementStyles {
  */
 ElementStyles.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
     "replace" in CSSStyleSheet.prototype;
-/**
- * https://wicg.github.io/construct-stylesheets/
- * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- *
- * @internal
- */
-class AdoptedStyleSheetsStrategy {
-    constructor(styles) {
-        this.sheets = styles.map((x) => {
-            if (x instanceof CSSStyleSheet) {
-                return x;
-            }
-            let sheet = styleSheetCache.get(x);
-            if (sheet === void 0) {
-                sheet = new CSSStyleSheet();
-                sheet.replaceSync(x);
-                styleSheetCache.set(x, sheet);
-            }
-            return sheet;
-        });
-    }
-    addStylesTo(target) {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
-    }
-    removeStylesFrom(target) {
-        const sheets = this.sheets;
-        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
-    }
-}
-ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));
 
 const registry$1 = createTypeRegistry();
 /**
@@ -1468,6 +1967,85 @@ function cssDirective() {
     };
 }
 
+function handleChange(directive, controller, observer) {
+    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+class CSSBindingDirective {
+    /**
+     * Creates an instance of CSSBindingDirective.
+     * @param dataBinding - The binding to use in CSS.
+     * @param targetAspect - The CSS property to target.
+     */
+    constructor(dataBinding, targetAspect) {
+        this.dataBinding = dataBinding;
+        this.targetAspect = targetAspect;
+    }
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS(add) {
+        add(this);
+        return `var(${this.targetAspect})`;
+    }
+    /**
+     * Executed when this behavior is attached to a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    addedCallback(controller) {
+        var _a;
+        const element = controller.source;
+        if (!element.$cssBindings) {
+            element.$cssBindings = new Map();
+            const setAttribute = element.setAttribute;
+            element.setAttribute = (attr, value) => {
+                setAttribute.call(element, attr, value);
+                if (attr === "style") {
+                    element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
+                }
+            };
+        }
+        const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : (controller[this.targetAspect] = this.dataBinding.createObserver(this, this));
+        observer.controller = controller;
+        controller.source.$cssBindings.set(this, { controller, observer });
+    }
+    /**
+     * Executed when this behavior's host is connected.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    connectedCallback(controller) {
+        handleChange(this, controller, controller[this.targetAspect]);
+    }
+    /**
+     * Executed when this behavior is detached from a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    removedCallback(controller) {
+        if (controller.source.$cssBindings) {
+            controller.source.$cssBindings.delete(this);
+        }
+    }
+    /**
+     * Called when a subject this instance has subscribed to changes.
+     * @param subject - The subject of the change.
+     * @param args - The event args detailing the change that occurred.
+     *
+     * @internal
+     */
+    handleChange(_, observer) {
+        handleChange(this, observer.controller, observer);
+    }
+}
+CSSDirective.define(CSSBindingDirective);
+
+const marker$1 = `${Math.random().toString(36).substring(2, 8)}`;
+let varId = 0;
+const nextCSSVariable = () => `--v${marker$1}${++varId}`;
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
@@ -1478,7 +2056,13 @@ function collectStyles(strings, values) {
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
-        if (CSSDirective.getForInstance(value) !== void 0) {
+        if (isFunction(value)) {
+            value = new CSSBindingDirective(oneWay(value), nextCSSVariable()).createCSS(add);
+        }
+        else if (value instanceof Binding) {
+            value = new CSSBindingDirective(value, nextCSSVariable()).createCSS(add);
+        }
+        else if (CSSDirective.getForInstance(value) !== void 0) {
             value = value.createCSS(add);
         }
         if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
@@ -1550,68 +2134,119 @@ css.partial = (strings, ...values) => {
     const { styles, behaviors } = collectStyles(strings, values);
     return new CSSPartial(styles, behaviors);
 };
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-const cssPartial = css.partial;
 
+const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
+const repeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
+const elementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
+const elementBoundaryEndMarker = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
+function isComment$1(node) {
+    return node && node.nodeType === Node.COMMENT_NODE;
+}
 /**
- * Common DOM APIs.
- * @public
+ * Markup utilities to aid in template hydration.
+ * @internal
  */
-const DOM = Object.freeze({
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: Updates.enqueue,
+const HydrationMarkup = Object.freeze({
+    attributeMarkerName: "data-fe-b",
+    attributeBindingSeparator: " ",
+    contentBindingStartMarker(index, uniqueId) {
+        return `fe-b$$start$$${index}$$${uniqueId}$$fe-b`;
+    },
+    contentBindingEndMarker(index, uniqueId) {
+        return `fe-b$$end$$${index}$$${uniqueId}$$fe-b`;
+    },
+    repeatStartMarker(index) {
+        return `fe-repeat$$start$$${index}$$fe-repeat`;
+    },
+    repeatEndMarker(index) {
+        return `fe-repeat$$end$$${index}$$fe-repeat`;
+    },
+    isContentBindingStartMarker(content) {
+        return bindingStartMarker.test(content);
+    },
+    isContentBindingEndMarker(content) {
+        return bindingEndMarker.test(content);
+    },
+    isRepeatViewStartMarker(content) {
+        return repeatViewStartMarker.test(content);
+    },
+    isRepeatViewEndMarker(content) {
+        return repeatViewEndMarker.test(content);
+    },
+    isElementBoundaryStartMarker(node) {
+        return isComment$1(node) && elementBoundaryStartMarker.test(node.data.trim());
+    },
+    isElementBoundaryEndMarker(node) {
+        return isComment$1(node) && elementBoundaryEndMarker.test(node.data);
+    },
     /**
-     * @deprecated
-     * Use Updates.next()
+     * Returns the indexes of the ViewBehaviorFactories affecting
+     * attributes for the element, or null if no factories were found.
      */
-    nextUpdate: Updates.next,
+    parseAttributeBinding(node) {
+        const attr = node.getAttribute(this.attributeMarkerName);
+        return attr === null
+            ? attr
+            : attr.split(this.attributeBindingSeparator).map(i => parseInt(i));
+    },
     /**
-     * @deprecated
-     * Use Updates.process()
+     * Parses the ViewBehaviorFactory index from string data. Returns
+     * the binding index or null if the index cannot be retrieved.
      */
-    processUpdates: Updates.process,
+    parseContentBindingStartMarker(content) {
+        return parseIndexAndIdMarker(bindingStartMarker, content);
+    },
+    parseContentBindingEndMarker(content) {
+        return parseIndexAndIdMarker(bindingEndMarker, content);
+    },
     /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
+     * Parses the index of a repeat directive from a content string.
      */
-    setAttribute(element, attributeName, value) {
-        value === null || value === undefined
-            ? element.removeAttribute(attributeName)
-            : element.setAttribute(attributeName, value);
+    parseRepeatStartMarker(content) {
+        return parseIntMarker(repeatViewStartMarker, content);
+    },
+    parseRepeatEndMarker(content) {
+        return parseIntMarker(repeatViewEndMarker, content);
     },
     /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
+     * Parses element Id from element boundary markers
      */
-    setBooleanAttribute(element, attributeName, value) {
-        value
-            ? element.setAttribute(attributeName, "")
-            : element.removeAttribute(attributeName);
+    parseElementBoundaryStartMarker(content) {
+        return parseStringMarker(elementBoundaryStartMarker, content.trim());
+    },
+    parseElementBoundaryEndMarker(content) {
+        return parseStringMarker(elementBoundaryEndMarker, content);
     },
 });
+function parseIntMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : parseInt(match[1]);
+}
+function parseStringMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : match[1];
+}
+function parseIndexAndIdMarker(regex, content) {
+    const match = regex.exec(content);
+    return match === null ? match : [parseInt(match[1]), match[2]];
+}
+/**
+ * @internal
+ */
+const Hydratable = Symbol.for("fe-hydration");
+function isHydratable(value) {
+    return value[Hydratable] === Hydratable;
+}
 
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
 const interpolationEnd = `}${marker}`;
 const interpolationEndLength = interpolationEnd.length;
-let id = 0;
+let id$1 = 0;
 /** @internal */
-const nextId = () => `${marker}-${++id}`;
+const nextId = () => `${marker}-${++id$1}`;
 /**
  * Common APIs related to markup generation.
  * @public
@@ -1681,67 +2316,6 @@ const Parser = Object.freeze({
     },
 });
 
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-const ViewBehaviorOrchestrator = Object.freeze({
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create(source) {
-        const behaviors = [];
-        const targets = {};
-        let unbindables = null;
-        let isConnected = false;
-        return {
-            source,
-            context: ExecutionContext.default,
-            targets,
-            get isBound() {
-                return isConnected;
-            },
-            addBehaviorFactory(factory, target) {
-                const nodeId = factory.nodeId || (factory.nodeId = nextId());
-                factory.id || (factory.id = nextId());
-                this.addTarget(nodeId, target);
-                this.addBehavior(factory.createBehavior());
-            },
-            addTarget(nodeId, target) {
-                targets[nodeId] = target;
-            },
-            addBehavior(behavior) {
-                behaviors.push(behavior);
-                if (isConnected) {
-                    behavior.bind(this);
-                }
-            },
-            onUnbind(unbindable) {
-                if (unbindables === null) {
-                    unbindables = [];
-                }
-                unbindables.push(unbindable);
-            },
-            connectedCallback(controller) {
-                if (!isConnected) {
-                    isConnected = true;
-                    behaviors.forEach(x => x.bind(this));
-                }
-            },
-            disconnectedCallback(controller) {
-                if (isConnected) {
-                    isConnected = false;
-                    if (unbindables !== null) {
-                        unbindables.forEach(x => x.unbind(this));
-                    }
-                }
-            },
-        };
-    },
-});
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -1769,67 +2343,6 @@ const HTMLDirective = Object.freeze({
         registry.register(options);
         return type;
     },
-});
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-function htmlDirective(options) {
-    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-    return function (type) {
-        HTMLDirective.define(type, options);
-    };
-}
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-class Binding {
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate, isVolatile = false) {
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
-}
-/**
- * The type of HTML aspect to target.
- * @public
- */
-const Aspect = Object.freeze({
-    /**
-     * Not aspected.
-     */
-    none: 0,
-    /**
-     * An attribute.
-     */
-    attribute: 1,
-    /**
-     * A boolean attribute.
-     */
-    booleanAttribute: 2,
-    /**
-     * A property.
-     */
-    property: 3,
-    /**
-     * Content
-     */
-    content: 4,
-    /**
-     * A token list.
-     */
-    tokenList: 5,
-    /**
-     * An event.
-     */
-    event: 6,
     /**
      *
      * @param directive - The directive to assign the aspect to.
@@ -1837,48 +2350,46 @@ const Aspect = Object.freeze({
      * @remarks
      * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
+    assignAspect(directive, value) {
         if (!value) {
-            directive.aspectType = Aspect.content;
+            directive.aspectType = DOMAspect.content;
             return;
         }
         directive.sourceAspect = value;
         switch (value[0]) {
             case ":":
                 directive.targetAspect = value.substring(1);
-                switch (directive.targetAspect) {
-                    case "innerHTML":
-                        directive.aspectType = Aspect.property;
-                        break;
-                    case "classList":
-                        directive.aspectType = Aspect.tokenList;
-                        break;
-                    default:
-                        directive.aspectType = Aspect.property;
-                        break;
-                }
+                directive.aspectType =
+                    directive.targetAspect === "classList"
+                        ? DOMAspect.tokenList
+                        : DOMAspect.property;
                 break;
             case "?":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.booleanAttribute;
+                directive.aspectType = DOMAspect.booleanAttribute;
                 break;
             case "@":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.event;
+                directive.aspectType = DOMAspect.event;
                 break;
             default:
-                if (value === "class") {
-                    directive.targetAspect = "className";
-                    directive.aspectType = Aspect.property;
-                }
-                else {
-                    directive.targetAspect = value;
-                    directive.aspectType = Aspect.attribute;
-                }
+                directive.targetAspect = value;
+                directive.aspectType = DOMAspect.attribute;
                 break;
         }
     },
 });
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
+ * @public
+ */
+function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        HTMLDirective.define(type, options);
+    };
+}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -1890,10 +2401,6 @@ class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -1912,327 +2419,200 @@ class StatelessAttachedAttributeDirective {
         return this;
     }
 }
+makeSerializationNoop(StatelessAttachedAttributeDirective);
 
-const createInnerHTMLBinding = globalThis.TrustedHTML
-    ? (binding) => (s, c) => {
-        const value = binding(s, c);
-        if (value instanceof TrustedHTML) {
-            return value;
-        }
-        throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
-    }
-    : (binding) => binding;
-class OnChangeBinding extends Binding {
-    createObserver(_, subscriber) {
-        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+class HydrationTargetElementError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, 
+    /**
+     * The Compiled View Behavior Factories that belong to the view.
+     */
+    factories, 
+    /**
+     * The node to target factory.
+     */
+    node) {
+        super(message);
+        this.factories = factories;
+        this.node = node;
     }
 }
-class OneTimeBinding extends Binding {
-    createObserver() {
-        return this;
-    }
-    bind(controller) {
-        return this.evaluate(controller.source, controller.context);
-    }
+function isComment(node) {
+    return node.nodeType === Node.COMMENT_NODE;
 }
-function updateContent(target, aspect, value, controller) {
-    // If there's no actual value, then this equates to the
-    // empty string for the purposes of content bindings.
-    if (value === null || value === undefined) {
-        value = "";
-    }
-    // If the value has a "create" method, then it's a ContentTemplate.
-    if (value.create) {
-        target.textContent = "";
-        let view = target.$fastView;
-        // If there's no previous view that we might be able to
-        // reuse then create a new view from the template.
-        if (view === void 0) {
-            view = value.create();
-        }
-        else {
-            // If there is a previous view, but it wasn't created
-            // from the same template as the new value, then we
-            // need to remove the old view if it's still in the DOM
-            // and create a new view from the template.
-            if (target.$fastTemplate !== value) {
-                if (view.isComposed) {
-                    view.remove();
-                    view.unbind();
-                }
-                view = value.create();
-            }
-        }
-        // It's possible that the value is the same as the previous template
-        // and that there's actually no need to compose it.
-        if (!view.isComposed) {
-            view.isComposed = true;
-            view.bind(controller.source, controller.context);
-            view.insertBefore(target);
-            target.$fastView = view;
-            target.$fastTemplate = value;
-        }
-        else if (view.needsBindOnly) {
-            view.needsBindOnly = false;
-            view.bind(controller.source, controller.context);
-        }
-    }
-    else {
-        const view = target.$fastView;
-        // If there is a view and it's currently composed into
-        // the DOM, then we need to remove it.
-        if (view !== void 0 && view.isComposed) {
-            view.isComposed = false;
-            view.remove();
-            if (view.needsBindOnly) {
-                view.needsBindOnly = false;
+function isText(node) {
+    return node.nodeType === Node.TEXT_NODE;
+}
+/**
+ * Returns a range object inclusive of all nodes including and between the
+ * provided first and last node.
+ * @param first - The first node
+ * @param last - This last node
+ * @returns
+ */
+function createRangeForNodes(first, last) {
+    const range = document.createRange();
+    range.setStart(first, 0);
+    // The lastIndex should be inclusive of the end of the lastChild. Obtain offset based
+    // on usageNotes:  https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd#usage_notes
+    range.setEnd(last, isComment(last) || isText(last) ? last.data.length : last.childNodes.length);
+    return range;
+}
+function isShadowRoot(node) {
+    return node instanceof DocumentFragment && "mode" in node;
+}
+/**
+ * Maps {@link CompiledViewBehaviorFactory} ids to the corresponding node targets for the view.
+ * @param firstNode - The first node of the view.
+ * @param lastNode -  The last node of the view.
+ * @param factories - The Compiled View Behavior Factories that belong to the view.
+ * @returns - A {@link ViewBehaviorTargets } object for the factories in the view.
+ */
+function buildViewBindingTargets(firstNode, lastNode, factories) {
+    const range = createRangeForNodes(firstNode, lastNode);
+    const treeRoot = range.commonAncestorContainer;
+    const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            return range.comparePoint(node, 0) === 0
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
+        },
+    });
+    const targets = {};
+    const boundaries = {};
+    let node = (walker.currentNode = firstNode);
+    while (node !== null) {
+        switch (node.nodeType) {
+            case Node.ELEMENT_NODE: {
+                targetElement(node, factories, targets);
+                break;
             }
-            else {
-                view.unbind();
+            case Node.COMMENT_NODE: {
+                targetComment(node, walker, factories, targets, boundaries);
+                break;
             }
         }
-        target.textContent = value;
+        node = walker.nextNode();
     }
+    range.detach();
+    return { targets, boundaries };
 }
-function updateTokenList(target, aspect, value) {
-    var _a;
-    const lookup = `${this.id}-t`;
-    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { c: 0, v: Object.create(null) });
-    const versions = state.v;
-    let currentVersion = state.c;
-    const tokenList = target[aspect];
-    // Add the classes, tracking the version at which they were added.
-    if (value !== null && value !== undefined && value.length) {
-        const names = value.split(/\s+/);
-        for (let i = 0, ii = names.length; i < ii; ++i) {
-            const currentName = names[i];
-            if (currentName === "") {
-                continue;
+function targetElement(node, factories, targets) {
+    // Check for attributes and map any factories.
+    const attrFactoryIds = HydrationMarkup.parseAttributeBinding(node);
+    if (attrFactoryIds !== null) {
+        for (const id of attrFactoryIds) {
+            if (!factories[id]) {
+                throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
             }
-            versions[currentName] = currentVersion;
-            tokenList.add(currentName);
+            targetFactory(factories[id], node, targets);
         }
+        node.removeAttribute(HydrationMarkup.attributeMarkerName);
     }
-    state.v = currentVersion + 1;
-    // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
+}
+function targetComment(node, walker, factories, targets, boundaries) {
+    if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
+        skipToElementBoundaryEndMarker(node, walker);
         return;
     }
-    // Remove classes from the previous version.
-    currentVersion -= 1;
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
-            tokenList.remove(name);
+    if (HydrationMarkup.isContentBindingStartMarker(node.data)) {
+        const parsed = HydrationMarkup.parseContentBindingStartMarker(node.data);
+        if (parsed === null) {
+            return;
         }
-    }
-}
-const setProperty = (t, a, v) => (t[a] = v);
-const eventTarget = () => void 0;
-/**
- * A directive that applies bindings.
- * @public
- */
-class HTMLBindingDirective {
-    /**
-     * Creates an instance of HTMLBindingDirective.
-     * @param dataBinding - The binding configuration to apply.
-     */
-    constructor(dataBinding) {
-        this.dataBinding = dataBinding;
-        this.updateTarget = null;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
-        /**
-         * The type of aspect to target.
-         */
-        this.aspectType = Aspect.content;
-        /** @internal */
-        this.bind = this.bindDefault;
-        this.data = `${this.id}-d`;
-    }
-    /**
-     * Creates HTML to be used within a template.
-     * @param add - Can be used to add  behavior factories to a template.
-     */
-    createHTML(add) {
-        return Markup.interpolation(add(this));
-    }
-    /**
-     * Creates a behavior.
-     */
-    createBehavior() {
-        if (this.updateTarget === null) {
-            if (this.targetAspect === "innerHTML") {
-                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
-            }
-            switch (this.aspectType) {
-                case 1:
-                    this.updateTarget = DOM.setAttribute;
-                    break;
-                case 2:
-                    this.updateTarget = DOM.setBooleanAttribute;
-                    break;
-                case 3:
-                    this.updateTarget = setProperty;
-                    break;
-                case 4:
-                    this.bind = this.bindContent;
-                    this.updateTarget = updateContent;
-                    break;
-                case 5:
-                    this.updateTarget = updateTokenList;
+        const [index, id] = parsed;
+        const factory = factories[index];
+        const nodes = [];
+        let current = walker.nextSibling();
+        node.data = "";
+        const first = current;
+        // Search for the binding end marker that closes the binding.
+        while (current !== null) {
+            if (isComment(current)) {
+                const parsed = HydrationMarkup.parseContentBindingEndMarker(current.data);
+                if (parsed && parsed[1] === id) {
                     break;
-                case 6:
-                    this.bind = this.bindEvent;
-                    this.updateTarget = eventTarget;
-                    break;
-                default:
-                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+                }
             }
+            nodes.push(current);
+            current = walker.nextSibling();
         }
-        return this;
-    }
-    /** @internal */
-    bindDefault(controller) {
-        var _a;
-        const target = controller.targets[this.nodeId];
-        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
-        observer.target = target;
-        observer.controller = controller;
-        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
-        if (this.updateTarget === updateContent) {
-            controller.onUnbind(this);
+        if (current === null) {
+            const root = node.getRootNode();
+            throw new Error(`Error hydrating Comment node inside "${isShadowRoot(root) ? root.host.nodeName : root.nodeName}".`);
         }
-    }
-    /** @internal */
-    bindContent(controller) {
-        this.bindDefault(controller);
-        controller.onUnbind(this);
-    }
-    /** @internal */
-    bindEvent(controller) {
-        const target = controller.targets[this.nodeId];
-        target[this.data] = controller;
-        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
-    }
-    /** @internal */
-    unbind(controller) {
-        const target = controller.targets[this.nodeId];
-        const view = target.$fastView;
-        if (view !== void 0 && view.isComposed) {
-            view.unbind();
-            view.needsBindOnly = true;
+        current.data = "";
+        if (nodes.length === 1 && isText(nodes[0])) {
+            targetFactory(factory, nodes[0], targets);
         }
-    }
-    /** @internal */
-    handleEvent(event) {
-        const target = event.currentTarget;
-        ExecutionContext.setEvent(event);
-        const controller = target[this.data];
-        const result = this.dataBinding.evaluate(controller.source, controller.context);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
+        else {
+            // If current === first, it means there is no content in
+            // the view. This happens when a `when` directive evaluates false,
+            // or whenever a content binding returns null or undefined.
+            // In that case, there will never be any content
+            // to hydrate and Binding can simply create a HTMLView
+            // whenever it needs to.
+            if (current !== first && current.previousSibling !== null) {
+                boundaries[factory.targetNodeId] = {
+                    first,
+                    last: current.previousSibling,
+                };
+            }
+            // Binding evaluates to null / undefined or a template.
+            // If binding revaluates to string, it will replace content in target
+            // So we always insert a text node to ensure that
+            // text content binding will be written to this text node instead of comment
+            const dummyTextNode = current.parentNode.insertBefore(document.createTextNode(""), current);
+            targetFactory(factory, dummyTextNode, targets);
         }
     }
-    /** @internal */
-    handleChange(binding, observer) {
-        const target = observer.target;
-        const controller = observer.controller;
-        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
-    }
 }
-HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
- * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
- * @param isVolatile - Indicates whether the binding is volatile or not.
- * @returns A binding configuration.
- * @public
- */
-function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
-    return new OnChangeBinding(binding, isVolatile);
-}
-/**
- * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
- * @returns A binding configuration.
- * @public
- */
-function oneTime(binding) {
-    return new OneTimeBinding(binding);
-}
-/**
- * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
- * @param options - Event listener options.
- * @returns A binding configuration.
- * @public
+ * Moves TreeWalker to element boundary end marker
+ * @param node - element boundary start marker node
+ * @param walker - tree walker
  */
-function listener(binding, options) {
-    const config = new OnChangeBinding(binding, false);
-    config.options = options;
-    return config;
+function skipToElementBoundaryEndMarker(node, walker) {
+    const id = HydrationMarkup.parseElementBoundaryStartMarker(node.data);
+    let current = walker.nextSibling();
+    while (current !== null) {
+        if (isComment(current)) {
+            const parsed = HydrationMarkup.parseElementBoundaryEndMarker(current.data);
+            if (parsed && parsed === id) {
+                break;
+            }
+        }
+        current = walker.nextSibling();
+    }
 }
-/**
- * Normalizes the input value into a binding.
- * @param value - The value to create the default binding for.
- * @returns A binding configuration for the provided value.
- * @public
- */
-function normalizeBinding(value) {
-    return isFunction(value)
-        ? bind(value)
-        : value instanceof Binding
-            ? value
-            : oneTime(() => value);
+function targetFactory(factory, node, targets) {
+    if (factory.targetNodeId === undefined) {
+        // Dev error, this shouldn't ever be thrown
+        throw new Error("Factory could not be target to the node");
+    }
+    targets[factory.targetNodeId] = node;
 }
 
+var _a;
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
     let next;
     while (current !== lastNode) {
         next = current.nextSibling;
+        if (!next) {
+            throw new Error(`Unmatched first/last child inside "${lastNode.getRootNode().host.nodeName}".`);
+        }
         parent.removeChild(current);
         current = next;
     }
     parent.removeChild(lastNode);
 }
-/**
- * The standard View implementation, which also implements ElementView and SyntheticView.
- * @public
- */
-class HTMLView {
-    /**
-     * Constructs an instance of HTMLView.
-     * @param fragment - The html fragment that contains the nodes for this view.
-     * @param behaviors - The behaviors to be applied to this view.
-     */
-    constructor(fragment, factories, targets) {
-        this.fragment = fragment;
-        this.factories = factories;
-        this.targets = targets;
-        this.behaviors = null;
-        this.unbindables = [];
-        /**
-         * The data that the view is bound to.
-         */
-        this.source = null;
-        /**
-         * Indicates whether the controller is bound.
-         */
-        this.isBound = false;
-        /**
-         * Indicates how the source's lifetime relates to the controller's lifetime.
-         */
-        this.sourceLifetime = SourceLifetime.unknown;
-        /**
-         * The execution context the view is running within.
-         */
-        this.context = this;
+class DefaultExecutionContext {
+    constructor() {
         /**
          * The index of the current item within a repeat context.
          */
@@ -2241,8 +2621,6 @@ class HTMLView {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
-        this.firstChild = fragment.firstChild;
-        this.lastChild = fragment.lastChild;
     }
     /**
      * The current event within an event handler.
@@ -2297,6 +2675,43 @@ class HTMLView {
     eventTarget() {
         return this.event.target;
     }
+}
+/**
+ * The standard View implementation, which also implements ElementView and SyntheticView.
+ * @public
+ */
+class HTMLView extends DefaultExecutionContext {
+    /**
+     * Constructs an instance of HTMLView.
+     * @param fragment - The html fragment that contains the nodes for this view.
+     * @param behaviors - The behaviors to be applied to this view.
+     */
+    constructor(fragment, factories, targets) {
+        super();
+        this.fragment = fragment;
+        this.factories = factories;
+        this.targets = targets;
+        this.behaviors = null;
+        this.unbindables = [];
+        /**
+         * The data that the view is bound to.
+         */
+        this.source = null;
+        /**
+         * Indicates whether the controller is bound.
+         */
+        this.isBound = false;
+        /**
+         * Indicates how the source's lifetime relates to the controller's lifetime.
+         */
+        this.sourceLifetime = SourceLifetime.unknown;
+        /**
+         * The execution context the view is running within.
+         */
+        this.context = this;
+        this.firstChild = fragment.firstChild;
+        this.lastChild = fragment.lastChild;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -2388,9 +2803,219 @@ class HTMLView {
         }
         this.isBound = true;
     }
-    /**
-     * Unbinds a view's behaviors from its binding source.
-     */
+    /**
+     * Unbinds a view's behaviors from its binding source.
+     */
+    unbind() {
+        if (!this.isBound || this.source === null) {
+            return;
+        }
+        this.evaluateUnbindables();
+        this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
+    }
+    /**
+     * Efficiently disposes of a contiguous range of synthetic view instances.
+     * @param views - A contiguous range of views to be disposed.
+     */
+    static disposeContiguousBatch(views) {
+        if (views.length === 0) {
+            return;
+        }
+        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
+        for (let i = 0, ii = views.length; i < ii; ++i) {
+            views[i].unbind();
+        }
+    }
+}
+makeSerializationNoop(HTMLView);
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
+const HydrationStage = {
+    unhydrated: "unhydrated",
+    hydrating: "hydrating",
+    hydrated: "hydrated",
+};
+/** @public */
+class HydrationBindingError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, 
+    /**
+     * The factory that was unable to be bound
+     */
+    factory, 
+    /**
+     * A DocumentFragment containing a clone of the
+     * view's Nodes.
+     */
+    fragment, 
+    /**
+     * String representation of the HTML in the template that
+     * threw the binding error.
+     */
+    templateString) {
+        super(message);
+        this.factory = factory;
+        this.fragment = fragment;
+        this.templateString = templateString;
+    }
+}
+class HydrationView extends DefaultExecutionContext {
+    constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
+        super();
+        this.firstChild = firstChild;
+        this.lastChild = lastChild;
+        this.sourceTemplate = sourceTemplate;
+        this.hostBindingTarget = hostBindingTarget;
+        this[_a] = Hydratable;
+        this.context = this;
+        this.source = null;
+        this.isBound = false;
+        this.sourceLifetime = SourceLifetime.unknown;
+        this.unbindables = [];
+        this.fragment = null;
+        this.behaviors = null;
+        this._hydrationStage = HydrationStage.unhydrated;
+        this._bindingViewBoundaries = {};
+        this._targets = {};
+        this.factories = sourceTemplate.compile().factories;
+    }
+    get hydrationStage() {
+        return this._hydrationStage;
+    }
+    get targets() {
+        return this._targets;
+    }
+    get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
+    /**
+     * no-op. Hydrated views are don't need to be moved from a documentFragment
+     * to the target node.
+     */
+    insertBefore(node) {
+        // 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.
+     */
+    appendTo(node) {
+        if (this.fragment !== null) {
+            node.appendChild(this.fragment);
+        }
+    }
+    remove() {
+        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().host.nodeName}".`);
+            }
+            fragment.appendChild(current);
+            current = next;
+        }
+        fragment.appendChild(end);
+    }
+    bind(source, context = this) {
+        var _b, _c;
+        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(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;
+                    }
+                    throw new HydrationBindingError(`HydrationView was unable to successfully target bindings inside "${(_c = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode()).host) === null || _c === void 0 ? void 0 : _c.nodeName}".`, 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;
+    }
     unbind() {
         if (!this.isBound || this.source === null) {
             return;
@@ -2400,6 +3025,17 @@ class HTMLView {
         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.
+     */
+    dispose() {
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
     evaluateUnbindables() {
         const unbindables = this.unbindables;
         for (let i = 0, ii = unbindables.length; i < ii; ++i) {
@@ -2407,22 +3043,220 @@ class HTMLView {
         }
         unbindables.length = 0;
     }
+}
+_a = Hydratable;
+makeSerializationNoop(HydrationView);
+
+function isContentTemplate(value) {
+    return value.create !== undefined;
+}
+function updateContent(target, aspect, value, controller) {
+    // If there's no actual value, then this equates to the
+    // empty string for the purposes of content bindings.
+    if (value === null || value === undefined) {
+        value = "";
+    }
+    // If the value has a "create" method, then it's a ContentTemplate.
+    if (isContentTemplate(value)) {
+        target.textContent = "";
+        let view = target.$fastView;
+        // If there's no previous view that we might be able to
+        // reuse then create a new view from the template.
+        if (view === void 0) {
+            if (isHydratable(controller) &&
+                isHydratable(value) &&
+                controller.bindingViewBoundaries[this.targetNodeId] !== undefined &&
+                controller.hydrationStage !== HydrationStage.hydrated) {
+                const viewNodes = controller.bindingViewBoundaries[this.targetNodeId];
+                view = value.hydrate(viewNodes.first, viewNodes.last);
+            }
+            else {
+                view = value.create();
+            }
+        }
+        else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (target.$fastTemplate !== value) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+                view = value.create();
+            }
+        }
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(controller.source, controller.context);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(controller.source, controller.context);
+        }
+    }
+    else {
+        const view = target.$fastView;
+        // If there is a view and it's currently composed into
+        // the DOM, then we need to remove it.
+        if (view !== void 0 && view.isComposed) {
+            view.isComposed = false;
+            view.remove();
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
+            }
+            else {
+                view.unbind();
+            }
+        }
+        target.textContent = value;
+    }
+}
+function updateTokenList(target, aspect, value) {
+    var _a;
+    const lookup = `${this.id}-t`;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { v: 0, cv: Object.create(null) });
+    const classVersions = state.cv;
+    let version = state.v;
+    const tokenList = target[aspect];
+    // Add the classes, tracking the version at which they were added.
+    if (value !== null && value !== undefined && value.length) {
+        const names = value.split(/\s+/);
+        for (let i = 0, ii = names.length; i < ii; ++i) {
+            const currentName = names[i];
+            if (currentName === "") {
+                continue;
+            }
+            classVersions[currentName] = version;
+            tokenList.add(currentName);
+        }
+    }
+    state.v = version + 1;
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (version === 0) {
+        return;
+    }
+    // Remove classes from the previous version.
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
+            tokenList.remove(name);
+        }
+    }
+}
+const sinkLookup = {
+    [DOMAspect.attribute]: DOM.setAttribute,
+    [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+    [DOMAspect.property]: (t, a, v) => (t[a] = v),
+    [DOMAspect.content]: updateContent,
+    [DOMAspect.tokenList]: updateTokenList,
+    [DOMAspect.event]: () => void 0,
+};
+/**
+ * A directive that applies bindings.
+ * @public
+ */
+class HTMLBindingDirective {
     /**
-     * Efficiently disposes of a contiguous range of synthetic view instances.
-     * @param views - A contiguous range of views to be disposed.
+     * Creates an instance of HTMLBindingDirective.
+     * @param dataBinding - The binding configuration to apply.
      */
-    static disposeContiguousBatch(views) {
-        if (views.length === 0) {
-            return;
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = DOMAspect.content;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.interpolation(add(this));
+    }
+    /**
+     * Creates a behavior.
+     */
+    createBehavior() {
+        var _a;
+        if (this.updateTarget === null) {
+            const sink = sinkLookup[this.aspectType];
+            const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+            if (!sink) {
+                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+            this.data = `${this.id}-d`;
+            this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
         }
-        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
-        for (let i = 0, ii = views.length; i < ii; ++i) {
-            views[i].unbind();
+        return this;
+    }
+    /** @internal */
+    bind(controller) {
+        var _a;
+        const target = controller.targets[this.targetNodeId];
+        const isHydrating = isHydratable(controller) &&
+            controller.hydrationStage &&
+            controller.hydrationStage !== HydrationStage.hydrated;
+        switch (this.aspectType) {
+            case DOMAspect.event:
+                target[this.data] = controller;
+                target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+                break;
+            case DOMAspect.content:
+                controller.onUnbind(this);
+            // intentional fall through
+            default:
+                const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+                observer.target = target;
+                observer.controller = controller;
+                if (isHydrating &&
+                    (this.aspectType === DOMAspect.attribute ||
+                        this.aspectType === DOMAspect.booleanAttribute)) {
+                    observer.bind(controller);
+                    // Skip updating target during bind for attributes
+                    break;
+                }
+                this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+                break;
+        }
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
         }
     }
+    /** @internal */
+    handleEvent(event) {
+        const controller = event.currentTarget[this.data];
+        if (controller.isBound) {
+            ExecutionContext.setEvent(event);
+            const result = this.dataBinding.evaluate(controller.source, controller.context);
+            ExecutionContext.setEvent(null);
+            if (result !== true) {
+                event.preventDefault();
+            }
+        }
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+    }
 }
-Observable.defineProperty(HTMLView.prototype, "index");
-Observable.defineProperty(HTMLView.prototype, "length");
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -2448,20 +3282,25 @@ const warningHost = new Proxy(document.createElement("div"), {
     },
 });
 class CompilationContext {
-    constructor(fragment, directives) {
+    constructor(fragment, directives, policy) {
         this.fragment = fragment;
         this.directives = directives;
+        this.policy = policy;
         this.proto = null;
         this.nodeIds = new Set();
         this.descriptors = {};
         this.factories = [];
     }
-    addFactory(factory, parentId, nodeId, targetIndex) {
+    addFactory(factory, parentId, nodeId, targetIndex, tagName) {
+        var _a, _b;
         if (!this.nodeIds.has(nodeId)) {
             this.nodeIds.add(nodeId);
             this.addTargetDescriptor(parentId, nodeId, targetIndex);
         }
-        factory.nodeId = nodeId;
+        factory.id = (_a = factory.id) !== null && _a !== void 0 ? _a : nextId();
+        factory.targetNodeId = nodeId;
+        factory.targetTagName = tagName;
+        factory.policy = (_b = factory.policy) !== null && _b !== void 0 ? _b : this.policy;
         this.factories.push(factory);
     }
     freeze() {
@@ -2514,19 +3353,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(oneTime(() => attrValue));
-                Aspect.assign(result, attr.name);
+                result = new HTMLBindingDirective(oneTime(() => attrValue, context.policy));
+                HTMLDirective.assignAspect(result, attr.name);
             }
         }
         else {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            result = Compiler.aggregate(parseResult);
+            result = Compiler.aggregate(parseResult, context.policy);
         }
         if (result !== null) {
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result, parentId, nodeId, nodeIndex);
+            context.addFactory(result, parentId, nodeId, nodeIndex, node.tagName);
         }
     }
 }
@@ -2551,8 +3390,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            Aspect.assign(currentPart);
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -2584,7 +3423,7 @@ function compileNode(context, parentId, node, nodeIndex) {
             if (parts !== null) {
                 context.addFactory(
                 /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
             }
             break;
     }
@@ -2598,45 +3437,28 @@ function isMarker(node, directives) {
         Parser.parse(node.data, directives) !== null);
 }
 const templateTag = "TEMPLATE";
-const policyOptions = { createHTML: html => html };
-let htmlPolicy = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
-    : policyOptions;
-const fastHTMLPolicy = htmlPolicy;
 /**
  * Common APIs related to compilation.
  * @public
  */
 const Compiler = {
-    /**
-     * Sets the HTML trusted types policy used by the compiler.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy) {
-        if (htmlPolicy !== fastHTMLPolicy) {
-            throw FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
-        }
-        htmlPolicy = policy;
-    },
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
      * @param html - The html string or template element to compile.
-     * @param directives - The directives referenced by the template.
+     * @param factories - The behavior factories referenced by the template.
+     * @param policy - The security policy to compile the html with.
      * @remarks
      * The template that is provided for compilation is altered in-place
      * and cannot be compiled again. If the original template must be preserved,
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile(html, directives) {
+    compile(html, factories, policy = DOM.policy) {
         let template;
         if (isString(html)) {
             template = document.createElement(templateTag);
-            template.innerHTML = htmlPolicy.createHTML(html);
+            template.innerHTML = policy.createHTML(html);
             const fec = template.content.firstElementChild;
             if (fec !== null && fec.tagName === templateTag) {
                 template = fec;
@@ -2645,20 +3467,23 @@ const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
-        const context = new CompilationContext(fragment, directives);
+        const context = new CompilationContext(fragment, factories, policy);
         compileAttributes(context, "", template, /* host */ "h", 0, true);
         if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild, directives) ||
+        isMarker(fragment.firstChild, factories) ||
             // Or if there is only one node and a directive, it means the template's content
             // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
             // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)) {
+            (fragment.childNodes.length === 1 && Object.keys(factories).length > 0)) {
             fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
         compileChildren(context, fragment, /* root */ "r");
@@ -2677,23 +3502,24 @@ const Compiler = {
      * Aggregates an array of strings and directives into a single directive.
      * @param parts - A heterogeneous array of static strings interspersed with
      * directives.
+     * @param policy - The security policy to use with the aggregated bindings.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts) {
+    aggregate(parts, policy = DOM.policy) {
         if (parts.length === 1) {
             return parts[0];
         }
         let sourceAspect;
-        let binding;
         let isVolatile = false;
+        let bindingPolicy = void 0;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
                 return () => x;
             }
             sourceAspect = x.sourceAspect || sourceAspect;
-            binding = x.dataBinding || binding;
             isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
             return x.dataBinding.evaluate;
         });
         const expression = (scope, context) => {
@@ -2703,14 +3529,56 @@ const Compiler = {
             }
             return output;
         };
-        binding.evaluate = expression;
-        binding.isVolatile = isVolatile;
-        const directive = new HTMLBindingDirective(binding);
-        Aspect.assign(directive, sourceAspect);
+        const directive = new HTMLBindingDirective(oneWay(expression, bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy, isVolatile));
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };
 
+// Much thanks to LitHTML for working this out!
+const lastAttributeNameRegex = 
+/* eslint-disable-next-line no-control-regex, max-len */
+/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+const noFactories = Object.create(null);
+/**
+ * Inlines a template into another template.
+ * @public
+ */
+class InlineTemplateDirective {
+    /**
+     * Creates an instance of InlineTemplateDirective.
+     * @param template - The template to inline.
+     */
+    constructor(html, factories = noFactories) {
+        this.html = html;
+        this.factories = factories;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        const factories = this.factories;
+        for (const key in factories) {
+            add(factories[key]);
+        }
+        return this.html;
+    }
+}
+/**
+ * An empty template partial.
+ */
+InlineTemplateDirective.empty = new InlineTemplateDirective("");
+HTMLDirective.define(InlineTemplateDirective);
+function createHTML(value, prevString, add, definition = HTMLDirective.getForInstance(value)) {
+    if (definition.aspected) {
+        const match = lastAttributeNameRegex.exec(prevString);
+        if (match !== null) {
+            HTMLDirective.assignAspect(value, match[2]);
+        }
+    }
+    return value.createHTML(add);
+}
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -2720,21 +3588,53 @@ class ViewTemplate {
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
      * @param factories - The directives that will be connected to placeholders in the html.
+     * @param policy - The security policy to use when compiling this template.
      */
-    constructor(html, factories) {
+    constructor(html, factories = {}, policy) {
+        this.policy = policy;
         this.result = null;
         this.html = html;
         this.factories = factories;
     }
+    /**
+     * @internal
+     */
+    compile() {
+        if (this.result === null) {
+            this.result = Compiler.compile(this.html, this.factories, this.policy);
+        }
+        return this.result;
+    }
     /**
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     create(hostBindingTarget) {
-        if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.factories);
+        return this.compile().createView(hostBindingTarget);
+    }
+    /**
+     * Returns a directive that can inline the template.
+     */
+    inline() {
+        return new InlineTemplateDirective(isString(this.html) ? this.html : this.html.innerHTML, this.factories);
+    }
+    /**
+     * Sets the DOMPolicy for this template.
+     * @param policy - The policy to associated with this template.
+     * @returns The modified template instance.
+     * @remarks
+     * The DOMPolicy can only be set once for a template and cannot be
+     * set after the template is compiled.
+     */
+    withPolicy(policy) {
+        if (this.result) {
+            throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
         }
-        return this.result.createView(hostBindingTarget);
+        if (this.policy) {
+            throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
+        }
+        this.policy = policy;
+        return this;
     }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -2749,18 +3649,49 @@ class ViewTemplate {
         view.appendTo(host);
         return view;
     }
-}
-// Much thanks to LitHTML for working this out!
-const lastAttributeNameRegex = 
-/* eslint-disable-next-line no-control-regex */
-/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-function createAspectedHTML(value, prevString, add) {
-    const match = lastAttributeNameRegex.exec(prevString);
-    if (match !== null) {
-        Aspect.assign(value, match[2]);
+    /**
+     * Creates a template based on a set of static strings and dynamic values.
+     * @param strings - The static strings to create the template with.
+     * @param values - The dynamic values to create the template with.
+     * @param policy - The DOMPolicy to associated with the template.
+     * @returns A ViewTemplate.
+     * @remarks
+     * This API should not be used directly under normal circumstances because constructing
+     * a template in this way, if not done properly, can open up the application to XSS
+     * attacks. When using this API, provide a strong DOMPolicy that can properly sanitize
+     * and also be sure to manually sanitize all static strings particularly if they can
+     * come from user input.
+     */
+    static create(strings, values, policy) {
+        let html = "";
+        const factories = Object.create(null);
+        const add = (factory) => {
+            var _a;
+            const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
+            factories[id] = factory;
+            return id;
+        };
+        for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+            const currentString = strings[i];
+            let currentValue = values[i];
+            let definition;
+            html += currentString;
+            if (isFunction(currentValue)) {
+                currentValue = new HTMLBindingDirective(oneWay(currentValue));
+            }
+            else if (currentValue instanceof Binding) {
+                currentValue = new HTMLBindingDirective(currentValue);
+            }
+            else if (!(definition = HTMLDirective.getForInstance(currentValue))) {
+                const staticValue = currentValue;
+                currentValue = new HTMLBindingDirective(oneTime(() => staticValue));
+            }
+            html += createHTML(currentValue, currentString, add, definition);
+        }
+        return new ViewTemplate(html + strings[strings.length - 1], factories, policy);
     }
-    return value.createHTML(add);
 }
+makeSerializationNoop(ViewTemplate);
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
@@ -2770,51 +3701,15 @@ function createAspectedHTML(value, prevString, add) {
  * other template instances, and Directive instances.
  * @public
  */
-function html(strings, ...values) {
-    let html = "";
-    const factories = Object.create(null);
-    const add = (factory) => {
-        var _a;
-        const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
-        factories[id] = factory;
-        return id;
-    };
-    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
-        const currentString = strings[i];
-        const currentValue = values[i];
-        let definition;
-        html += currentString;
-        if (isFunction(currentValue)) {
-            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
-        }
-        else if (isString(currentValue)) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
-                Aspect.assign(directive, match[2]);
-                html += directive.createHTML(add);
-            }
-            else {
-                html += currentValue;
-            }
-        }
-        else if (currentValue instanceof Binding) {
-            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
-        }
-        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), currentString, add);
-        }
-        else {
-            if (definition.aspected) {
-                html += createAspectedHTML(currentValue, currentString, add);
-            }
-            else {
-                html += currentValue.createHTML(add);
-            }
-        }
+const html = ((strings, ...values) => {
+    if (Array.isArray(strings) && Array.isArray(strings.raw)) {
+        return ViewTemplate.create(strings, values);
     }
-    return new ViewTemplate(html + strings[strings.length - 1], factories);
-}
+    throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
+});
+html.partial = (html) => {
+    return new InlineTemplateDirective(html);
+};
 
 /**
  * The runtime behavior for template references.
@@ -2826,7 +3721,7 @@ class RefDirective extends StatelessAttachedAttributeDirective {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        controller.source[this.options] = controller.targets[this.nodeId];
+        controller.source[this.options] = controller.targets[this.targetNodeId];
     }
 }
 HTMLDirective.define(RefDirective);
@@ -2837,19 +3732,26 @@ HTMLDirective.define(RefDirective);
  */
 const ref = (propertyName) => new RefDirective(propertyName);
 
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-function when(condition, templateOrTemplateBinding) {
+function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }
 
 const defaultRepeatOptions = Object.freeze({
@@ -2868,6 +3770,19 @@ function bindWithPositioning(view, items, index, controller) {
     view.context.index = index;
     view.bind(items[index]);
 }
+function isCommentNode(node) {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+class HydrationRepeatError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, propertyBag) {
+        super(message);
+        this.propertyBag = propertyBag;
+    }
+}
 /**
  * A behavior that renders a template for each item in an array.
  * @public
@@ -2884,12 +3799,13 @@ class RepeatBehavior {
      */
     constructor(directive) {
         this.directive = directive;
-        this.views = [];
         this.items = null;
         this.itemsObserver = null;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
-        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        /** @internal */
+        this.views = [];
+        this.itemsBindingObserver = directive.dataBinding.createObserver(this, directive);
+        this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
         if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
@@ -2899,12 +3815,19 @@ class RepeatBehavior {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        this.location = controller.targets[this.directive.nodeId];
+        this.location = controller.targets[this.directive.targetNodeId];
         this.controller = controller;
         this.items = this.itemsBindingObserver.bind(controller);
         this.template = this.templateBindingObserver.bind(controller);
         this.observeItems(true);
-        this.refreshAllViews();
+        if (isHydratable(this.template) &&
+            isHydratable(controller) &&
+            controller.hydrationStage !== HydrationStage.hydrated) {
+            this.hydrateViews(this.template);
+        }
+        else {
+            this.refreshAllViews();
+        }
         controller.onUnbind(this);
     }
     /**
@@ -3005,10 +3928,10 @@ class RepeatBehavior {
             leftoverViews[i].dispose();
         }
         if (this.directive.options.positioning) {
-            for (let i = 0, ii = views.length; i < ii; ++i) {
+            for (let i = 0, viewsLength = views.length; i < viewsLength; ++i) {
                 const context = views[i].context;
-                context.length = i;
-                context.index = ii;
+                context.length = viewsLength;
+                context.index = i;
             }
         }
     }
@@ -3042,6 +3965,18 @@ class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
+                    if (!view) {
+                        const serializer = new XMLSerializer();
+                        throw new HydrationRepeatError(`View is null or undefined inside "${this.location.getRootNode().host.nodeName}".`, {
+                            index: i,
+                            hydrationStage: this.controller
+                                .hydrationStage,
+                            itemsLength,
+                            viewsState: views.map(v => (v ? "hydrated" : "empty")),
+                            viewTemplateString: serializer.serializeToString(template.create().fragment),
+                            rootNodeContent: serializer.serializeToString(this.location.getRootNode()),
+                        });
+                    }
                     bindView(view, items, i, controller);
                 }
                 else {
@@ -3060,7 +3995,76 @@ class RepeatBehavior {
     unbindAllViews() {
         const views = this.views;
         for (let i = 0, ii = views.length; i < ii; ++i) {
-            views[i].unbind();
+            const view = views[i];
+            if (!view) {
+                const serializer = new XMLSerializer();
+                throw new HydrationRepeatError(`View is null or undefined inside "${this.location.getRootNode().host.nodeName}".`, {
+                    index: i,
+                    hydrationStage: this.controller.hydrationStage,
+                    viewsState: views.map(v => (v ? "hydrated" : "empty")),
+                    rootNodeContent: serializer.serializeToString(this.location.getRootNode()),
+                });
+            }
+            view.unbind();
+        }
+    }
+    hydrateViews(template) {
+        if (!this.items) {
+            return;
+        }
+        this.views = new Array(this.items.length);
+        let current = this.location.previousSibling;
+        while (current !== null) {
+            if (!isCommentNode(current)) {
+                current = current.previousSibling;
+                continue;
+            }
+            const index = HydrationMarkup.parseRepeatEndMarker(current.data);
+            if (index === null) {
+                current = current.previousSibling;
+                continue;
+            }
+            current.data = "";
+            // end of repeat is the previousSibling of end comment
+            const end = current.previousSibling;
+            if (!end) {
+                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": end should never be null.`);
+            }
+            // find start marker
+            let start = end;
+            // How many unmatched end markers we've encountered
+            let unmatchedEndMarkers = 0;
+            while (start !== null) {
+                if (isCommentNode(start)) {
+                    if (HydrationMarkup.isRepeatViewEndMarker(start.data)) {
+                        unmatchedEndMarkers++;
+                    }
+                    else if (HydrationMarkup.isRepeatViewStartMarker(start.data)) {
+                        if (unmatchedEndMarkers) {
+                            unmatchedEndMarkers--;
+                        }
+                        else {
+                            if (HydrationMarkup.parseRepeatStartMarker(start.data) !==
+                                index) {
+                                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host
+                                    .nodeName}": Mismatched start and end markers.`);
+                            }
+                            start.data = "";
+                            current = start.previousSibling;
+                            // start of repeat content is the nextSibling of start comment
+                            start = start.nextSibling;
+                            const view = template.hydrate(start, end);
+                            this.views[index] = view;
+                            this.bindView(view, this.items, index, this.controller);
+                            break;
+                        }
+                    }
+                }
+                start = start.previousSibling;
+            }
+            if (!start) {
+                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": start should never be null.`);
+            }
         }
     }
 }
@@ -3079,10 +4083,6 @@ class RepeatDirective {
         this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         ArrayObserver.enable();
     }
     /**
@@ -3110,8 +4110,8 @@ HTMLDirective.define(RepeatDirective);
  * @public
  */
 function repeat(items, template, options = defaultRepeatOptions) {
-    const dataBinding = normalizeBinding(items);
-    const templateBinding = normalizeBinding(template);
+    const dataBinding = normalizeBinding$1(items);
+    const templateBinding = normalizeBinding$1(template);
     return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
@@ -3131,9 +4131,15 @@ const elements = (selector) => selector
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 class NodeObservationDirective extends StatelessAttachedAttributeDirective {
-    constructor() {
-        super(...arguments);
-        this.sourceProperty = `${this.id}-s`;
+    /**
+     * The unique id of the factory.
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+        this._controllerProperty = `${value}-c`;
     }
     /**
      * Bind this behavior to the source.
@@ -3142,8 +4148,8 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param targets - The targets that behaviors in a view can attach to.
      */
     bind(controller) {
-        const target = controller.targets[this.nodeId];
-        target[this.sourceProperty] = controller.source;
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
         this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
         controller.onUnbind(this);
@@ -3155,10 +4161,10 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        const target = controller.targets[this.targetNodeId];
         this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
-        target[this.sourceProperty] = null;
+        target[this._controllerProperty] = null;
     }
     /**
      * Gets the data source for the target.
@@ -3166,7 +4172,7 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @returns The source.
      */
     getSource(target) {
-        return target[this.sourceProperty];
+        return target[this._controllerProperty].source;
     }
     /**
      * Updates the source property with the computed nodes.
@@ -3250,7 +4256,7 @@ class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -3262,8 +4268,12 @@ class ChildrenDirective extends NodeObservationDirective {
      * @param target - The target to observe.
      */
     observe(target) {
-        var _a;
-        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            target[this.observerProperty] = observer;
+        }
         observer.target = target;
         observer.observe(target, this.options);
     }
@@ -3326,13 +4336,26 @@ const booleanConverter = {
         return value ? "true" : "false";
     },
     fromView(value) {
-        return value === null ||
+        return !(value === null ||
             value === void 0 ||
             value === "false" ||
             value === false ||
-            value === 0
-            ? false
-            : true;
+            value === 0);
+    },
+};
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values. `null`, `undefined`, `""`,
+ * and `void` values are converted to `null`.
+ * @public
+ */
+const nullableBooleanConverter = {
+    toView(value) {
+        return typeof value === "boolean" ? value.toString() : "";
+    },
+    fromView(value) {
+        return [null, undefined, void 0].includes(value)
+            ? null
+            : booleanConverter.fromView(value);
     },
 };
 function toNumber(value) {
@@ -3389,7 +4412,7 @@ class AttributeDefinition {
     /**
      * Sets the value of the attribute/property on the source element.
      * @param source - The source element to access.
-     * @param value - The value to set the attribute/property to.
+     * @param newValue - The value to set the attribute/property to.
      */
     setValue(source, newValue) {
         const oldValue = source[this.fieldName];
@@ -3500,7 +4523,8 @@ function attr(configOrTarget, prop) {
 
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
-const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
+const fastElementBaseTypes = new Set();
+const fastElementRegistry = FAST.getById(KernelServiceId.elementRegistry, () => createTypeRegistry());
 /**
  * Defines metadata for a FASTElement.
  * @public
@@ -3548,51 +4572,564 @@ class FASTElementDefinition {
         this.styles = ElementStyles.normalize(nameOrConfig.styles);
         fastElementRegistry.register(this);
     }
-    /**
-     * Indicates if this element has been defined in at least one registry.
-     */
-    get isDefined() {
-        return this.platformDefined;
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return this.platformDefined;
+    }
+    /**
+     * Defines a custom element based on this definition.
+     * @param registry - The element registry to define the element in.
+     * @remarks
+     * This operation is idempotent per registry.
+     */
+    define(registry = this.registry) {
+        const type = this.type;
+        if (!registry.get(this.name)) {
+            this.platformDefined = true;
+            registry.define(this.name, type, this.elementOptions);
+        }
+        return this;
+    }
+    /**
+     * Creates an instance of FASTElementDefinition.
+     * @param type - The type this definition is being created for.
+     * @param nameOrDef - The name of the element to define or a config object
+     * that describes the element to define.
+     */
+    static compose(type, nameOrDef) {
+        if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
+    /**
+     * Registers a FASTElement base type.
+     * @param type - The type to register as a base type.
+     * @internal
+     */
+    static registerBaseType(type) {
+        fastElementBaseTypes.add(type);
+    }
+}
+/**
+ * Gets the element definition associated with the specified type.
+ * @param type - The custom element type to retrieve the definition for.
+ */
+FASTElementDefinition.getByType = fastElementRegistry.getByType;
+/**
+ * Gets the element definition associated with the instance.
+ * @param instance - The custom element instance to retrieve the definition for.
+ */
+FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
+
+/**
+ * A Behavior that enables advanced rendering.
+ * @public
+ */
+class RenderBehavior {
+    /**
+     * Creates an instance of RenderBehavior.
+     * @param directive - The render directive that created this behavior.
+     */
+    constructor(directive) {
+        this.directive = directive;
+        this.location = null;
+        this.controller = null;
+        this.view = null;
+        this.data = null;
+        this.dataBindingObserver = directive.dataBinding.createObserver(this, directive);
+        this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
+    }
+    /**
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
+     */
+    bind(controller) {
+        this.location = controller.targets[this.directive.targetNodeId];
+        this.controller = controller;
+        this.data = this.dataBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
+        controller.onUnbind(this);
+        if (isHydratable(this.template) &&
+            isHydratable(controller) &&
+            controller.hydrationStage !== HydrationStage.hydrated &&
+            !this.view) {
+            const viewNodes = controller.bindingViewBoundaries[this.directive.targetNodeId];
+            if (viewNodes) {
+                this.view = this.template.hydrate(viewNodes.first, viewNodes.last);
+                this.bindView(this.view);
+            }
+        }
+        else {
+            this.refreshView();
+        }
+    }
+    /**
+     * Unbinds this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
+     */
+    unbind(controller) {
+        const view = this.view;
+        if (view !== null && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleChange(source, observer) {
+        if (observer === this.dataBindingObserver) {
+            this.data = this.dataBindingObserver.bind(this.controller);
+        }
+        if (this.directive.templateBindingDependsOnData ||
+            observer === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
+        }
+        this.refreshView();
+    }
+    bindView(view) {
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(this.data);
+            view.insertBefore(this.location);
+            view.$fastTemplate = this.template;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(this.data);
+        }
+    }
+    refreshView() {
+        let view = this.view;
+        const template = this.template;
+        if (view === null) {
+            this.view = view = template.create();
+            this.view.context.parent = this.controller.source;
+            this.view.context.parentContext = this.controller.context;
+        }
+        else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (view.$fastTemplate !== template) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+                this.view = view = template.create();
+                this.view.context.parent = this.controller.source;
+                this.view.context.parentContext = this.controller.context;
+            }
+        }
+        this.bindView(view);
+    }
+}
+/**
+ * A Directive that enables use of the RenderBehavior.
+ * @public
+ */
+class RenderDirective {
+    /**
+     * Creates an instance of RenderDirective.
+     * @param dataBinding - A binding expression that returns the data to render.
+     * @param templateBinding - A binding expression that returns the template to use to render the data.
+     */
+    constructor(dataBinding, templateBinding, templateBindingDependsOnData) {
+        this.dataBinding = dataBinding;
+        this.templateBinding = templateBinding;
+        this.templateBindingDependsOnData = templateBindingDependsOnData;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return new RenderBehavior(this);
+    }
+}
+HTMLDirective.define(RenderDirective);
+function isElementRenderOptions(object) {
+    return !!object.element || !!object.tagName;
+}
+const typeToInstructionLookup = new Map();
+/* eslint @typescript-eslint/naming-convention: "off"*/
+const defaultAttributes = { ":model": (x) => x };
+const brand = Symbol("RenderInstruction");
+const defaultViewName = "default-view";
+const nullTemplate = html `
+    &nbsp;
+`;
+function instructionToTemplate(def) {
+    if (def === void 0) {
+        return nullTemplate;
+    }
+    return def.template;
+}
+function createElementTemplate(tagName, options) {
+    const markup = [];
+    const values = [];
+    const { attributes, directives, content, policy } = options !== null && options !== void 0 ? options : {};
+    markup.push(`<${tagName}`);
+    if (attributes) {
+        const attrNames = Object.getOwnPropertyNames(attributes);
+        for (let i = 0, ii = attrNames.length; i < ii; ++i) {
+            const name = attrNames[i];
+            if (i === 0) {
+                markup[0] = `${markup[0]} ${name}="`;
+            }
+            else {
+                markup.push(`" ${name}="`);
+            }
+            values.push(attributes[name]);
+        }
+        markup.push(`"`);
+    }
+    if (directives) {
+        markup[markup.length - 1] += " ";
+        for (let i = 0, ii = directives.length; i < ii; ++i) {
+            const directive = directives[i];
+            markup.push(i > 0 ? "" : " ");
+            values.push(directive);
+        }
+    }
+    markup[markup.length - 1] += ">";
+    if (content && isFunction(content.create)) {
+        values.push(content);
+        markup.push(`</${tagName}>`);
+    }
+    else {
+        const lastIndex = markup.length - 1;
+        markup[lastIndex] = `${markup[lastIndex]}${content !== null && content !== void 0 ? content : ""}</${tagName}>`;
+    }
+    return ViewTemplate.create(markup, values, policy);
+}
+function create(options) {
+    var _a;
+    const name = (_a = options.name) !== null && _a !== void 0 ? _a : defaultViewName;
+    let template;
+    if (isElementRenderOptions(options)) {
+        let tagName = options.tagName;
+        if (!tagName) {
+            const def = FASTElementDefinition.getByType(options.element);
+            if (def) {
+                tagName = def.name;
+            }
+            else {
+                throw new Error("Invalid element for model rendering.");
+            }
+        }
+        if (!options.attributes) {
+            options.attributes = defaultAttributes;
+        }
+        template = createElementTemplate(tagName, options);
+    }
+    else {
+        template = options.template;
+    }
+    return {
+        brand,
+        type: options.type,
+        name,
+        template,
+    };
+}
+function instanceOf(object) {
+    return object && object.brand === brand;
+}
+function register(optionsOrInstruction) {
+    let lookup = typeToInstructionLookup.get(optionsOrInstruction.type);
+    if (lookup === void 0) {
+        typeToInstructionLookup.set(optionsOrInstruction.type, (lookup = Object.create(null)));
+    }
+    const instruction = instanceOf(optionsOrInstruction)
+        ? optionsOrInstruction
+        : create(optionsOrInstruction);
+    return (lookup[instruction.name] = instruction);
+}
+function getByType(type, name) {
+    const entries = typeToInstructionLookup.get(type);
+    if (entries === void 0) {
+        return void 0;
+    }
+    return entries[name !== null && name !== void 0 ? name : defaultViewName];
+}
+function getForInstance(object, name) {
+    if (object) {
+        return getByType(object.constructor, name);
+    }
+    return void 0;
+}
+/**
+ * Provides APIs for creating and interacting with render instructions.
+ * @public
+ */
+Object.freeze({
+    /**
+     * Checks whether the provided object is a RenderInstruction.
+     * @param object - The object to check.
+     * @returns true if the object is a RenderInstruction; false otherwise
+     */
+    instanceOf,
+    /**
+     * Creates a RenderInstruction for a set of options.
+     * @param options - The options to use when creating the RenderInstruction.
+     * @remarks
+     * This API should be used with caution. When providing attributes or content,
+     * if not done properly, you can open up the application to XSS attacks. When using this API,
+     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
+     * content and attribute values particularly if they can come from user input.
+     */
+    create,
+    /**
+     * Creates a template based on a tag name.
+     * @param tagName - The tag name to use when creating the template.
+     * @param attributes - The attributes to apply to the element.
+     * @param content - The content to insert into the element.
+     * @param policy - The DOMPolicy to create the template with.
+     * @returns A template based on the provided specifications.
+     * @remarks
+     * This API should be used with caution. When providing attributes or content,
+     * if not done properly, you can open up the application to XSS attacks. When using this API,
+     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
+     * content and attribute values particularly if they can come from user input.
+     */
+    createElementTemplate,
+    /**
+     * Creates and registers an instruction.
+     * @param options The options to use when creating the RenderInstruction.
+     * @remarks
+     * A previously created RenderInstruction can also be registered.
+     */
+    register,
+    /**
+     * Finds a previously registered RenderInstruction by type and optionally by name.
+     * @param type - The type to retrieve the RenderInstruction for.
+     * @param name - An optional name used in differentiating between multiple registered instructions.
+     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
+     */
+    getByType,
+    /**
+     * Finds a previously registered RenderInstruction for the instance's type and optionally by name.
+     * @param object - The instance to retrieve the RenderInstruction for.
+     * @param name - An optional name used in differentiating between multiple registered instructions.
+     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
+     */
+    getForInstance,
+});
+/**
+ * @internal
+ */
+class NodeTemplate {
+    constructor(node) {
+        this.node = node;
+        node.$fastTemplate = this;
+    }
+    get context() {
+        // HACK
+        return this;
+    }
+    bind(source) { }
+    unbind() { }
+    insertBefore(refNode) {
+        refNode.parentNode.insertBefore(this.node, refNode);
+    }
+    remove() {
+        this.node.parentNode.removeChild(this.node);
+    }
+    create() {
+        return this;
+    }
+    hydrate(first, last) {
+        return this;
+    }
+}
+/**
+ * Creates a RenderDirective for use in advanced rendering scenarios.
+ * @param value - The binding expression that returns the data to be rendered. The expression
+ * can also return a Node to render directly.
+ * @param template - A template to render the data with
+ * or a string to indicate which RenderInstruction to use when looking up a RenderInstruction.
+ * Expressions can also be provided to dynamically determine either the template or the name.
+ * @returns A RenderDirective suitable for use in a template.
+ * @remarks
+ * If no binding is provided, then a default binding that returns the source is created.
+ * If no template is provided, then a binding is created that will use registered
+ * RenderInstructions to determine the view.
+ * If the template binding returns a string, then it will be used to look up a
+ * RenderInstruction to determine the view.
+ * @public
+ */
+function render(value, template) {
+    let dataBinding;
+    if (value === void 0) {
+        dataBinding = oneTime((source) => source);
+    }
+    else {
+        dataBinding = normalizeBinding$1(value);
+    }
+    let templateBinding;
+    let templateBindingDependsOnData = false;
+    if (template === void 0) {
+        templateBindingDependsOnData = true;
+        templateBinding = oneTime((s, c) => {
+            var _a;
+            const data = dataBinding.evaluate(s, c);
+            if (data instanceof Node) {
+                return (_a = data.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(data);
+            }
+            return instructionToTemplate(getForInstance(data));
+        });
+    }
+    else if (isFunction(template)) {
+        templateBinding = oneWay((s, c) => {
+            var _a;
+            let result = template(s, c);
+            if (isString(result)) {
+                result = instructionToTemplate(getForInstance(dataBinding.evaluate(s, c), result));
+            }
+            else if (result instanceof Node) {
+                result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
+            }
+            return result;
+        }, void 0, true);
+    }
+    else if (isString(template)) {
+        templateBindingDependsOnData = true;
+        templateBinding = oneTime((s, c) => {
+            var _a;
+            const data = dataBinding.evaluate(s, c);
+            if (data instanceof Node) {
+                return (_a = data.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(data);
+            }
+            return instructionToTemplate(getForInstance(data, template));
+        });
+    }
+    else if (template instanceof Binding) {
+        const evaluateTemplate = template.evaluate;
+        template.evaluate = (s, c) => {
+            var _a;
+            let result = evaluateTemplate(s, c);
+            if (isString(result)) {
+                result = instructionToTemplate(getForInstance(dataBinding.evaluate(s, c), result));
+            }
+            else if (result instanceof Node) {
+                result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
+            }
+            return result;
+        };
+        templateBinding = template;
+    }
+    else {
+        templateBinding = oneTime((s, c) => template);
     }
+    return new RenderDirective(dataBinding, templateBinding, templateBindingDependsOnData);
+}
+
+/**
+ * An extension of MutationObserver that supports unobserving nodes.
+ * @internal
+ */
+class UnobservableMutationObserver extends MutationObserver {
     /**
-     * Defines a custom element based on this definition.
-     * @param registry - The element registry to define the element in.
-     * @remarks
-     * This operation is idempotent per registry.
+     * Creates an instance of UnobservableMutationObserver.
+     * @param callback - The callback to invoke when observed nodes are changed.
      */
-    define(registry = this.registry) {
-        const type = this.type;
-        if (!registry.get(this.name)) {
-            this.platformDefined = true;
-            registry.define(this.name, type, this.elementOptions);
+    constructor(callback) {
+        function handler(mutations) {
+            this.callback.call(null, mutations.filter(record => this.observedNodes.has(record.target)));
         }
-        return this;
+        super(handler);
+        this.callback = callback;
+        this.observedNodes = new Set();
     }
-    /**
-     * Creates an instance of FASTElementDefinition.
-     * @param type - The type this definition is being created for.
-     * @param nameOrDef - The name of the element to define or a config object
-     * that describes the element to define.
-     */
-    static compose(type, nameOrDef) {
-        const found = fastElementRegistry.getByType(type);
-        if (found) {
-            return new FASTElementDefinition(class extends type {
-            }, nameOrDef);
+    observe(target, options) {
+        this.observedNodes.add(target);
+        super.observe(target, options);
+    }
+    unobserve(target) {
+        this.observedNodes.delete(target);
+        if (this.observedNodes.size < 1) {
+            this.disconnect();
         }
-        return new FASTElementDefinition(type, nameOrDef);
     }
 }
 /**
- * Gets the element definition associated with the specified type.
- * @param type - The custom element type to retrieve the definition for.
- */
-FASTElementDefinition.getByType = fastElementRegistry.getByType;
-/**
- * Gets the element definition associated with the instance.
- * @param instance - The custom element instance to retrieve the definition for.
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
  */
-FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
+Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                var _a, _b, _c, _d;
+                const compiled = factory;
+                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
+                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
+                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
+                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
+                this.addTarget(compiled.targetNodeId, target);
+                this.addBehavior(compiled.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});
 
 const defaultEventOptions = {
     bubbles: true,
@@ -3605,6 +5142,7 @@ function getShadowRoot(element) {
     var _a, _b;
     return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
 }
+let elementControllerStrategy;
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
@@ -3623,8 +5161,19 @@ class ElementController extends PropertyChangeNotifier {
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._isConnected = false;
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
         this.behaviors = null;
+        /**
+         * Tracks whether behaviors are connected so that
+         * behaviors cant be connected multiple times
+         */
+        this.behaviorsConnected = false;
         this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
@@ -3679,11 +5228,28 @@ class ElementController extends PropertyChangeNotifier {
      */
     get isConnected() {
         Observable.track(this, isConnectedPropertyName);
-        return this._isConnected;
+        return this.stage === 1 /* Stages.connected */;
     }
-    setIsConnected(value) {
-        this._isConnected = value;
-        Observable.notify(this, isConnectedPropertyName);
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+    }
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime() {
+        var _a;
+        return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
     }
     /**
      * Gets/sets the template used to render the component.
@@ -3747,6 +5313,14 @@ class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior) {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+    }
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -3758,7 +5332,9 @@ class ElementController extends PropertyChangeNotifier {
         if (count === 0) {
             targetBehaviors.set(behavior, 1);
             behavior.addedCallback && behavior.addedCallback(this);
-            if (behavior.connectedCallback && this.isConnected) {
+            if (behavior.connectedCallback &&
+                !this.guardBehaviorConnection &&
+                (this.stage === 1 /* Stages.connected */ || this.stage === 0 /* Stages.connecting */)) {
                 behavior.connectedCallback(this);
             }
         }
@@ -3782,7 +5358,7 @@ class ElementController extends PropertyChangeNotifier {
         }
         if (count === 1 || force) {
             targetBehaviors.delete(behavior);
-            if (behavior.disconnectedCallback && this.isConnected) {
+            if (behavior.disconnectedCallback && this.stage !== 3 /* Stages.disconnected */) {
                 behavior.disconnectedCallback(this);
             }
             behavior.removedCallback && behavior.removedCallback(this);
@@ -3801,13 +5377,13 @@ class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : this.source;
             target.append(styles);
         }
-        else if (!styles.isAttachedTo(target)) {
+        else if (!styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.addStylesTo(target);
+            styles.addStylesTo(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
                     this.addBehavior(sourceBehaviors[i]);
@@ -3825,16 +5401,16 @@ class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source;
             target.removeChild(styles);
         }
-        else if (styles.isAttachedTo(target)) {
+        else if (styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.removeStylesFrom(target);
+            styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -3843,40 +5419,73 @@ class ElementController extends PropertyChangeNotifier {
      * Runs connected lifecycle behavior on the associated element.
      */
     connect() {
-        if (this._isConnected) {
+        if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
+        this.stage = 0 /* Stages.connecting */;
+        this.bindObservables();
+        this.connectBehaviors();
         if (this.needsInitialization) {
-            this.finishInitialization();
+            this.renderTemplate(this.template);
+            this.addStyles(this.mainStyles);
+            this.needsInitialization = false;
         }
         else if (this.view !== null) {
             this.view.bind(this.source);
         }
-        const behaviors = this.behaviors;
-        if (behaviors !== null) {
-            for (const key of behaviors.keys()) {
-                key.connectedCallback && key.connectedCallback(this);
+        this.stage = 1 /* Stages.connected */;
+        Observable.notify(this, isConnectedPropertyName);
+    }
+    bindObservables() {
+        if (this.boundObservables !== null) {
+            const element = this.source;
+            const boundObservables = this.boundObservables;
+            const propertyNames = Object.keys(boundObservables);
+            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
+                const propertyName = propertyNames[i];
+                element[propertyName] = boundObservables[propertyName];
+            }
+            this.boundObservables = null;
+        }
+    }
+    connectBehaviors() {
+        if (this.behaviorsConnected === false) {
+            const behaviors = this.behaviors;
+            if (behaviors !== null) {
+                this.guardBehaviorConnection = true;
+                for (const key of behaviors.keys()) {
+                    key.connectedCallback && key.connectedCallback(this);
+                }
+                this.guardBehaviorConnection = false;
+            }
+            this.behaviorsConnected = true;
+        }
+    }
+    disconnectBehaviors() {
+        if (this.behaviorsConnected === true) {
+            const behaviors = this.behaviors;
+            if (behaviors !== null) {
+                for (const key of behaviors.keys()) {
+                    key.disconnectedCallback && key.disconnectedCallback(this);
+                }
             }
+            this.behaviorsConnected = false;
         }
-        this.setIsConnected(true);
     }
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
     disconnect() {
-        if (!this._isConnected) {
+        if (this.stage !== 1 /* Stages.connected */) {
             return;
         }
-        this.setIsConnected(false);
+        this.stage = 2 /* Stages.disconnecting */;
+        Observable.notify(this, isConnectedPropertyName);
         if (this.view !== null) {
             this.view.unbind();
         }
-        const behaviors = this.behaviors;
-        if (behaviors !== null) {
-            for (const key of behaviors.keys()) {
-                key.disconnectedCallback && key.disconnectedCallback(this);
-            }
-        }
+        this.disconnectBehaviors();
+        this.stage = 3 /* Stages.disconnected */;
     }
     /**
      * Runs the attribute changed callback for the associated element.
@@ -3899,27 +5508,11 @@ class ElementController extends PropertyChangeNotifier {
      * Only emits events if connected.
      */
     emit(type, detail, options) {
-        if (this._isConnected) {
+        if (this.stage === 1 /* Stages.connected */) {
             return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;
     }
-    finishInitialization() {
-        const element = this.source;
-        const boundObservables = this.boundObservables;
-        // If we have any observables that were bound, re-apply their values.
-        if (boundObservables !== null) {
-            const propertyNames = Object.keys(boundObservables);
-            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
-                const propertyName = propertyNames[i];
-                element[propertyName] = boundObservables[propertyName];
-            }
-            this.boundObservables = null;
-        }
-        this.renderTemplate(this.template);
-        this.addStyles(this.mainStyles);
-        this.needsInitialization = false;
-    }
     renderTemplate(template) {
         var _a;
         // When getting the host to render to, we start by looking
@@ -3963,13 +5556,224 @@ class ElementController extends PropertyChangeNotifier {
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new ElementController(element, definition));
+        return (element.$fastController = new elementControllerStrategy(element, definition));
+    }
+    /**
+     * Sets the strategy that ElementController.forCustomElement uses to construct
+     * ElementController instances for an element.
+     * @param strategy - The strategy to use.
+     */
+    static setStrategy(strategy) {
+        elementControllerStrategy = strategy;
+    }
+}
+makeSerializationNoop(ElementController);
+// Set default strategy for ElementController
+ElementController.setStrategy(ElementController);
+/**
+ * Converts a styleTarget into the operative target. When the provided target is an Element
+ * that is a FASTElement, the function will return the ShadowRoot for that element. Otherwise,
+ * it will return the root node for the element.
+ * @param target
+ * @returns
+ */
+function normalizeStyleTarget(target) {
+    var _a;
+    if ("adoptedStyleSheets" in target) {
+        return target;
+    }
+    else {
+        return ((_a = getShadowRoot(target)) !== null && _a !== void 0 ? _a : target.getRootNode());
+    }
+}
+// Default StyleStrategy implementations are defined in this module because they
+// require access to element shadowRoots, and we don't want to leak shadowRoot
+// objects out of this module.
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+class AdoptedStyleSheetsStrategy {
+    constructor(styles) {
+        const styleSheetCache = AdoptedStyleSheetsStrategy.styleSheetCache;
+        this.sheets = styles.map((x) => {
+            if (x instanceof CSSStyleSheet) {
+                return x;
+            }
+            let sheet = styleSheetCache.get(x);
+            if (sheet === void 0) {
+                sheet = new CSSStyleSheet();
+                sheet.replaceSync(x);
+                styleSheetCache.set(x, sheet);
+            }
+            return sheet;
+        });
+    }
+    addStylesTo(target) {
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
+    }
+    removeStylesFrom(target) {
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
+    }
+}
+AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
+let id = 0;
+const nextStyleId = () => `fast-${++id}`;
+function usableStyleTarget(target) {
+    return target === document ? document.body : target;
+}
+/**
+ * @internal
+ */
+class StyleElementStrategy {
+    constructor(styles) {
+        this.styles = styles;
+        this.styleClass = nextStyleId();
+    }
+    addStylesTo(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = this.styles;
+        const styleClass = this.styleClass;
+        for (let i = 0; i < styles.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styles[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+    }
+    removeStylesFrom(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+    }
+}
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}
+const deferHydrationAttribute = "defer-hydration";
+const needsHydrationAttribute = "needs-hydration";
+/**
+ * An ElementController capable of hydrating FAST elements from
+ * Declarative Shadow DOM.
+ *
+ * @beta
+ */
+class HydratableElementController extends ElementController {
+    static hydrationObserverHandler(records) {
+        for (const record of records) {
+            HydratableElementController.hydrationObserver.unobserve(record.target);
+            record.target.$fastController.connect();
+        }
+    }
+    connect() {
+        var _a, _b;
+        // Initialize needsHydration on first connect
+        if (this.needsHydration === undefined) {
+            this.needsHydration =
+                this.source.getAttribute(needsHydrationAttribute) !== null;
+        }
+        // If the `defer-hydration` attribute exists on the source,
+        // wait for it to be removed before continuing connection behavior.
+        if (this.source.hasAttribute(deferHydrationAttribute)) {
+            HydratableElementController.hydrationObserver.observe(this.source, {
+                attributeFilter: [deferHydrationAttribute],
+            });
+            return;
+        }
+        // If the controller does not need to be hydrated, defer connection behavior
+        // to the base-class. This case handles element re-connection and initial connection
+        // of elements that did not get declarative shadow-dom emitted, as well as if an extending
+        // class
+        if (!this.needsHydration) {
+            super.connect();
+            return;
+        }
+        if (this.stage !== 3 /* Stages.disconnected */) {
+            return;
+        }
+        this.stage = 0 /* Stages.connecting */;
+        this.bindObservables();
+        this.connectBehaviors();
+        const element = this.source;
+        const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
+        if (this.template) {
+            if (isHydratable(this.template)) {
+                let firstChild = host.firstChild;
+                let lastChild = host.lastChild;
+                if (element.shadowRoot === null) {
+                    // handle element boundary markers when shadowRoot is not present
+                    if (HydrationMarkup.isElementBoundaryStartMarker(firstChild)) {
+                        firstChild.data = "";
+                        firstChild = firstChild.nextSibling;
+                    }
+                    if (HydrationMarkup.isElementBoundaryEndMarker(lastChild)) {
+                        lastChild.data = "";
+                        lastChild = lastChild.previousSibling;
+                    }
+                }
+                this.view = this.template.hydrate(firstChild, lastChild, element);
+                (_b = this.view) === null || _b === void 0 ? void 0 : _b.bind(this.source);
+            }
+            else {
+                this.renderTemplate(this.template);
+            }
+        }
+        this.addStyles(this.mainStyles);
+        this.stage = 1 /* Stages.connected */;
+        this.source.removeAttribute(needsHydrationAttribute);
+        this.needsInitialization = this.needsHydration = false;
+        Observable.notify(this, isConnectedPropertyName);
+    }
+    disconnect() {
+        super.disconnect();
+        HydratableElementController.hydrationObserver.unobserve(this.source);
+    }
+    static install() {
+        ElementController.setStrategy(HydratableElementController);
     }
 }
+HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
-    return class extends BaseType {
+    const type = class extends BaseType {
         constructor() {
             /* eslint-disable-next-line */
             super();
@@ -3988,6 +5792,8 @@ function createFASTElement(BaseType) {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }
     };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
 }
 function compose(type, nameOrDef) {
     if (isFunction(type)) {
@@ -4042,4 +5848,6 @@ function customElement(nameOrDef) {
     };
 }
 
-export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewBehaviorOrchestrator, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };
+DOM.setPolicy(DOMPolicy.create());
+
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, HydratableElementController, HydrationBindingError, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RenderBehavior, RenderDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding$1 as normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, render, repeat, slotted, volatile, when };