@microsoft/fast-element 2.0.0-beta.2 → 2.0.0-beta.20

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.
+ * @internal
+ */
+const isFunction = (object) => typeof object === "function";
+/**
+ * Determines whether or not an object is a string.
+ * @internal
+ */
+const isString = (object) => typeof object === "string";
+/**
+ * A function which does nothing.
+ * @internal
+ */
+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,
@@ -112,7 +114,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });
@@ -143,25 +145,475 @@ function createTypeRegistry() {
             return typeToDefinition.get(key);
         },
         getForInstance(object) {
+            if (object === null || object === void 0) {
+                return void 0;
+            }
             return typeToDefinition.get(object.constructor);
         },
     });
 }
-
 /**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
  * @internal
  */
-const isFunction = (object) => typeof object === "function";
+function createMetadataLocator() {
+    const metadataLookup = new WeakMap();
+    return function (target) {
+        let metadata = metadataLookup.get(target);
+        if (metadata === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (metadata === void 0 && currentTarget !== null) {
+                metadata = metadataLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            metadata = metadata === void 0 ? [] : metadata.slice(0);
+            metadataLookup.set(target, metadata);
+        }
+        return metadata;
+    };
+}
+
 /**
- * @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:", "");
+        }
+        sink(target, name, value, ...rest);
+    };
+}
+function block(tagName, aspect, aspectName, sink) {
+    throw new Error(`${aspectName} on ${tagName !== null && tagName !== void 0 ? tagName : "text"} is blocked by the current DOMPolicy.`);
+}
+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);
+        }
+    }
+}
+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;
@@ -388,15 +840,29 @@ class PropertyChangeNotifier {
     }
 }
 
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
 /**
  * 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 notifierLookup = new WeakMap();
-    const accessorLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
         throw FAST.error(1101 /* Message.needsArrayObservation */);
@@ -411,19 +877,7 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         }
         return found;
     }
-    function getAccessors(target) {
-        let accessors = accessorLookup.get(target);
-        if (accessors === void 0) {
-            let currentTarget = Reflect.getPrototypeOf(target);
-            while (accessors === void 0 && currentTarget !== null) {
-                accessors = accessorLookup.get(currentTarget);
-                currentTarget = Reflect.getPrototypeOf(currentTarget);
-            }
-            accessors = accessors === void 0 ? [] : accessors.slice(0);
-            accessorLookup.set(target, accessors);
-        }
-        return accessors;
-    }
+    const getAccessors = createMetadataLocator();
     class DefaultObservableAccessor {
         constructor(name) {
             this.name = name;
@@ -449,10 +903,10 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
-        constructor(binding, initialSubscriber, isVolatileBinding = false) {
-            super(binding, initialSubscriber);
-            this.binding = binding;
+    class ExpressionNotifierImplementation extends SubscriberSet {
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
@@ -463,21 +917,50 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
+            /**
+             * Opts out of JSON stringification.
+             */
+            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
         }
-        observe(source, context) {
-            if (this.needsRefresh && this.last !== null) {
-                this.dispose();
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.dispose();
             }
             const previousWatcher = watcher;
             watcher = this.needsRefresh ? this : void 0;
             this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
-            watcher = previousWatcher;
+            let result;
+            try {
+                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;
@@ -604,22 +1087,22 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
-         * @param binding - The binding to observe.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
+         * @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 BindingObserverImplementation(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());
         },
     });
 });
@@ -647,7 +1130,7 @@ function volatile(target, name, descriptor) {
         },
     });
 }
-const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
     let current = null;
     return {
         get() {
@@ -662,123 +1145,38 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
  * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
-class ExecutionContext {
-    constructor(parentSource = null, parentContext = null) {
-        /**
-         * The index of the current item within a repeat context.
-         */
-        this.index = 0;
-        /**
-         * The length of the current collection within a repeat context.
-         */
-        this.length = 0;
-        this.parent = parentSource;
-        this.parentContext = parentContext;
-    }
+const ExecutionContext = Object.freeze({
     /**
-     * The current event within an event handler.
+     * A default execution context.
      */
-    get event() {
-        return contextEvent.get();
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * has an even index.
-     */
-    get isEven() {
-        return this.index % 2 === 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * has an odd index.
-     */
-    get isOdd() {
-        return this.index % 2 !== 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is the first item in the collection.
-     */
-    get isFirst() {
-        return this.index === 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is somewhere in the middle of the collection.
-     */
-    get isInMiddle() {
-        return !this.isFirst && !this.isLast;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is the last item in the collection.
-     */
-    get isLast() {
-        return this.index === this.length - 1;
-    }
-    /**
-     * Returns the typed event detail of a custom event.
-     */
-    eventDetail() {
-        return this.event.detail;
-    }
-    /**
-     * Returns the typed event target of the event.
-     */
-    eventTarget() {
-        return this.event.target;
-    }
-    /**
-     * Updates the position/size on a context associated with a list item.
-     * @param index - The new index of the item.
-     * @param length - The new length of the list.
-     */
-    updatePosition(index, length) {
-        this.index = index;
-        this.length = length;
-    }
-    /**
-     * Creates a new execution context descendent from the current context.
-     * @param source - The source for the context if different than the parent.
-     * @returns A child execution context.
-     */
-    createChildContext(parentSource) {
-        return new ExecutionContext(parentSource, this);
-    }
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
+    },
     /**
-     * Creates a new execution context descent suitable for use in list rendering.
-     * @param item - The list item to serve as the source.
-     * @param index - The index of the item in the list.
-     * @param length - The length of the list.
+     * Gets the current event.
+     * @returns An event object.
      */
-    createItemContext(index, length) {
-        const childContext = Object.create(this);
-        childContext.index = index;
-        childContext.length = length;
-        return childContext;
-    }
+    getEvent() {
+        return contextEvent.get();
+    },
     /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
+     * Sets the current event.
+     * @param event - An event object.
      */
-    static setEvent(event) {
+    setEvent(event) {
         contextEvent.set(event);
-    }
-    /**
-     * Creates a new root execution context.
-     * @returns A new execution context.
-     */
-    static create() {
-        return new ExecutionContext();
-    }
-}
-/**
- * The default execution context.
- */
-ExecutionContext.default = new ExecutionContext();
-Observable.defineProperty(ExecutionContext.prototype, "index");
-Observable.defineProperty(ExecutionContext.prototype, "length");
+    },
+});
 
 /**
  * A splice map is a representation of how a previous array of items
@@ -845,10 +1243,311 @@ const SpliceStrategySupport = Object.freeze({
 const reset = new Splice(0, emptyArray, 0);
 reset.reset = true;
 const resetSplices = [reset];
+// Note: This function is *based* on the computation of the Levenshtein
+// "edit" distance. The one change is that "updates" are treated as two
+// edits - not one. With Array splices, an update is really a delete
+// followed by an add. By retaining this, we optimize for "keeping" the
+// maximum array items in the original array. For example:
+//
+//   'xxxx123' to '123yyyy'
+//
+// With 1-edit updates, the shortest path would be just to update all seven
+// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+// leaves the substring '123' intact.
+function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    // "Deletion" columns
+    const rowCount = oldEnd - oldStart + 1;
+    const columnCount = currentEnd - currentStart + 1;
+    const distances = new Array(rowCount);
+    let north;
+    let west;
+    // "Addition" rows. Initialize null column.
+    for (let i = 0; i < rowCount; ++i) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+    }
+    // Initialize null row
+    for (let j = 0; j < columnCount; ++j) {
+        distances[0][j] = j;
+    }
+    for (let i = 1; i < rowCount; ++i) {
+        for (let j = 1; j < columnCount; ++j) {
+            if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                distances[i][j] = distances[i - 1][j - 1];
+            }
+            else {
+                north = distances[i - 1][j] + 1;
+                west = distances[i][j - 1] + 1;
+                distances[i][j] = north < west ? north : west;
+            }
+        }
+    }
+    return distances;
+}
+// This starts at the final weight, and walks "backward" by finding
+// the minimum previous weight recursively until the origin of the weight
+// matrix.
+function spliceOperationsFromEditDistances(distances) {
+    let i = distances.length - 1;
+    let j = distances[0].length - 1;
+    let current = distances[i][j];
+    const edits = [];
+    while (i > 0 || j > 0) {
+        if (i === 0) {
+            edits.push(2 /* Edit.add */);
+            j--;
+            continue;
+        }
+        if (j === 0) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            continue;
+        }
+        const northWest = distances[i - 1][j - 1];
+        const west = distances[i - 1][j];
+        const north = distances[i][j - 1];
+        let min;
+        if (west < north) {
+            min = west < northWest ? west : northWest;
+        }
+        else {
+            min = north < northWest ? north : northWest;
+        }
+        if (min === northWest) {
+            if (northWest === current) {
+                edits.push(0 /* Edit.leave */);
+            }
+            else {
+                edits.push(1 /* Edit.update */);
+                current = northWest;
+            }
+            i--;
+            j--;
+        }
+        else if (min === west) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            current = west;
+        }
+        else {
+            edits.push(2 /* Edit.add */);
+            j--;
+            current = north;
+        }
+    }
+    return edits.reverse();
+}
+function sharedPrefix(current, old, searchLength) {
+    for (let i = 0; i < searchLength; ++i) {
+        if (current[i] !== old[i]) {
+            return i;
+        }
+    }
+    return searchLength;
+}
+function sharedSuffix(current, old, searchLength) {
+    let index1 = current.length;
+    let index2 = old.length;
+    let count = 0;
+    while (count < searchLength && current[--index1] === old[--index2]) {
+        count++;
+    }
+    return count;
+}
+function intersect(start1, end1, start2, end2) {
+    // Disjoint
+    if (end1 < start2 || end2 < start1) {
+        return -1;
+    }
+    // Adjacent
+    if (end1 === start2 || end2 === start1) {
+        return 0;
+    }
+    // Non-zero intersect, span1 first
+    if (start1 < start2) {
+        if (end1 < end2) {
+            return end1 - start2; // Overlap
+        }
+        return end2 - start2; // Contained
+    }
+    // Non-zero intersect, span2 first
+    if (end2 < end1) {
+        return end2 - start1; // Overlap
+    }
+    return end1 - start1; // Contained
+}
+/**
+ * @remarks
+ * Lacking individual splice mutation information, the minimal set of
+ * splices can be synthesized given the previous state and final state of an
+ * array. The basic approach is to calculate the edit distance matrix and
+ * choose the shortest path through it.
+ *
+ * Complexity: O(l * p)
+ *   l: The length of the current array
+ *   p: The length of the old array
+ */
+function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    let prefixCount = 0;
+    let suffixCount = 0;
+    const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+    if (currentStart === 0 && oldStart === 0) {
+        prefixCount = sharedPrefix(current, old, minLength);
+    }
+    if (currentEnd === current.length && oldEnd === old.length) {
+        suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+    }
+    currentStart += prefixCount;
+    oldStart += prefixCount;
+    currentEnd -= suffixCount;
+    oldEnd -= suffixCount;
+    if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+        return emptyArray;
+    }
+    if (currentStart === currentEnd) {
+        const splice = new Splice(currentStart, [], 0);
+        while (oldStart < oldEnd) {
+            splice.removed.push(old[oldStart++]);
+        }
+        return [splice];
+    }
+    else if (oldStart === oldEnd) {
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
+    }
+    const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+    const splices = [];
+    let splice = void 0;
+    let index = currentStart;
+    let oldIndex = oldStart;
+    for (let i = 0; i < ops.length; ++i) {
+        switch (ops[i]) {
+            case 0 /* Edit.leave */:
+                if (splice !== void 0) {
+                    splices.push(splice);
+                    splice = void 0;
+                }
+                index++;
+                oldIndex++;
+                break;
+            case 1 /* Edit.update */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            case 2 /* Edit.add */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                break;
+            case 3 /* Edit.delete */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            // no default
+        }
+    }
+    if (splice !== void 0) {
+        splices.push(splice);
+    }
+    return splices;
+}
+function merge(splice, splices) {
+    let inserted = false;
+    let insertionOffset = 0;
+    for (let i = 0; i < splices.length; i++) {
+        const current = splices[i];
+        current.index += insertionOffset;
+        if (inserted) {
+            continue;
+        }
+        const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+        if (intersectCount >= 0) {
+            // Merge the two splices
+            splices.splice(i, 1);
+            i--;
+            insertionOffset -= current.addedCount - current.removed.length;
+            splice.addedCount += current.addedCount - intersectCount;
+            const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+            if (!splice.addedCount && !deleteCount) {
+                // merged splice is a noop. discard.
+                inserted = true;
+            }
+            else {
+                let currentRemoved = current.removed;
+                if (splice.index < current.index) {
+                    // some prefix of splice.removed is prepended to current.removed.
+                    const prepend = splice.removed.slice(0, current.index - splice.index);
+                    prepend.push(...currentRemoved);
+                    currentRemoved = prepend;
+                }
+                if (splice.index + splice.removed.length >
+                    current.index + current.addedCount) {
+                    // some suffix of splice.removed is appended to current.removed.
+                    const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                    currentRemoved.push(...append);
+                }
+                splice.removed = currentRemoved;
+                if (current.index < splice.index) {
+                    splice.index = current.index;
+                }
+            }
+        }
+        else if (splice.index < current.index) {
+            // Insert splice here.
+            inserted = true;
+            splices.splice(i, 0, splice);
+            i++;
+            const offset = splice.addedCount - splice.removed.length;
+            current.index += offset;
+            insertionOffset += offset;
+        }
+    }
+    if (!inserted) {
+        splices.push(splice);
+    }
+}
+function project(array, changes) {
+    let splices = [];
+    const initialSplices = [];
+    for (let i = 0, ii = changes.length; i < ii; i++) {
+        merge(changes[i], initialSplices);
+    }
+    for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+        const splice = initialSplices[i];
+        if (splice.addedCount === 1 && splice.removed.length === 1) {
+            if (splice.removed[0] !== array[splice.index]) {
+                splices.push(splice);
+            }
+            continue;
+        }
+        splices = splices.concat(calc(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+    }
+    return splices;
+}
+/**
+ * A SpliceStrategy that attempts to merge all splices into the minimal set of
+ * splices needed to represent the change from the old array to the new array.
+ * @public
+ */
 let defaultSpliceStrategy = Object.freeze({
-    support: SpliceStrategySupport.splice,
+    support: SpliceStrategySupport.optimized,
     normalize(previous, current, changes) {
-        return previous === void 0 ? changes !== null && changes !== void 0 ? changes : emptyArray : resetSplices;
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+        return resetSplices;
     },
     pop(array, observer, pop, args) {
         const notEmpty = array.length > 0;
@@ -1046,7 +1745,6 @@ function lengthOf(array) {
     return array.length;
 }
 
-const styleSheetCache = new Map();
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -1117,42 +1815,26 @@ class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.
  */
 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();
 /**
@@ -1261,11 +1943,11 @@ class CSSPartial {
         }
         return this.css;
     }
-    bind(el) {
-        el.$fastController.addStyles(this.styles);
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
     }
-    unbind(el) {
-        el.$fastController.removeStyles(this.styles);
+    removedCallback(controller) {
+        controller.removeStyles(this.styles);
     }
 }
 CSSDirective.define(CSSPartial);
@@ -1273,68 +1955,14 @@ 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;
-
-/**
- * Common DOM APIs.
- * @public
- */
-const DOM = Object.freeze({
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: Updates.enqueue,
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: Updates.next,
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: Updates.process,
-    /**
-     * 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);
-    },
-});
 
 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
@@ -1431,97 +2059,71 @@ 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);
-    };
-}
-/**
- * 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.
      * @param value - The value to base the aspect determination on.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
-        directive.sourceAspect = value;
+    assignAspect(directive, value) {
         if (!value) {
+            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);
+    };
+}
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+    /**
+     * 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;
+    }
+}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -1533,13 +2135,11 @@ class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -1550,118 +2150,43 @@ class StatelessAttachedAttributeDirective {
     createHTML(add) {
         return Markup.attribute(add(this));
     }
-}
-
-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;
-/**
- * Describes how aspects of an HTML element will be affected by bindings.
- * @public
- */
-const BindingMode = Object.freeze({
-    /**
-     * Creates a binding mode based on the supplied behavior types.
-     * @param UpdateType - The base behavior type used to update aspects.
-     * @param EventType - The base behavior type used to respond to events.
-     * @returns A new binding mode.
-     */
-    define(UpdateType, EventType = EventBinding) {
-        return Object.freeze({
-            [1]: d => new UpdateType(d, DOM.setAttribute),
-            [2]: d => new UpdateType(d, DOM.setBooleanAttribute),
-            [3]: d => new UpdateType(d, (t, a, v) => (t[a] = v)),
-            [4]: d => new (createContentBinding(UpdateType))(d, updateContentTarget),
-            [5]: d => new UpdateType(d, updateTokenListTarget),
-            [6]: d => new EventType(d),
-        });
-    },
-});
-/**
- * Describes the configuration for a binding expression.
- * @public
- */
-const BindingConfig = Object.freeze({
-    /**
-     * Creates a binding configuration based on the provided mode and options.
-     * @param mode - The mode to use for the configuration.
-     * @param defaultOptions - The default options to use for the configuration.
-     * @returns A new binding configuration.
-     */
-    define(mode, defaultOptions) {
-        const config = (options) => {
-            return {
-                mode: config.mode,
-                options: Object.assign({}, defaultOptions, options),
-            };
-        };
-        config.options = defaultOptions;
-        config.mode = mode;
-        return config;
-    },
-});
-/**
- * A base binding behavior for DOM updates.
- * @public
- */
-class UpdateBinding {
-    /**
-     * Creates an instance of UpdateBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     * @param updateTarget - The function used to update the target with the latest value.
-     */
-    constructor(directive, updateTarget) {
-        this.directive = directive;
-        this.updateTarget = updateTarget;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) { }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) { }
     /**
      * Creates a behavior.
      * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
+    createBehavior() {
         return this;
     }
 }
-function createContentBinding(Type) {
-    return class extends Type {
-        unbind(source, context, targets) {
-            super.unbind(source, context, targets);
-            const target = targets[this.directive.nodeId];
-            const view = target.$fastView;
-            if (view !== void 0 && view.isComposed) {
-                view.unbind();
-                view.needsBindOnly = true;
-            }
-        }
-    };
+
+class OnChangeBinding extends Binding {
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+class OneTimeBinding extends Binding {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+    }
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
 }
-function updateContentTarget(target, aspect, value, source, context) {
+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 template-like.
+    // If the value has a "create" method, then it's a ContentTemplate.
     if (value.create) {
         target.textContent = "";
         let view = target.$fastView;
@@ -1687,14 +2212,14 @@ function updateContentTarget(target, aspect, value, source, context) {
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
             view.insertBefore(target);
             target.$fastView = view;
             target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
         }
     }
     else {
@@ -1702,199 +2227,58 @@ function updateContentTarget(target, aspect, value, source, context) {
         // 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 updateTokenListTarget(target, aspect, value) {
-    var _a;
-    const directive = this.directive;
-    const lookup = `${directive.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;
-            }
-            versions[currentName] = currentVersion;
-            tokenList.add(currentName);
-        }
-    }
-    state.v = currentVersion + 1;
-    // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
-        return;
-    }
-    // Remove classes from the previous version.
-    currentVersion -= 1;
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
-            tokenList.remove(name);
-        }
-    }
-}
-/**
- * A binding behavior for one-time bindings.
- * @public
- */
-class OneTimeBinding extends UpdateBinding {
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
-    }
-}
-/**
- * A binding behavior for bindings that change.
- * @public
- */
-class ChangeBinding extends UpdateBinding {
-    /**
-     * Creates an instance of ChangeBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     * @param updateTarget - The function used to update the target with the latest value.
-     */
-    constructor(directive, updateTarget) {
-        super(directive, updateTarget);
-        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
-        this.observerProperty = `${directive.id}-o`;
-    }
-    /**
-     * Returns the binding observer used to update the node.
-     * @param target - The target node.
-     * @returns A BindingObserver.
-     */
-    getObserver(target) {
-        var _a;
-        return ((_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.target = target;
-        observer.source = source;
-        observer.context = context;
-        this.updateTarget(target, directive.targetAspect, observer.observe(source, context), source, context);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const target = targets[this.directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.dispose();
-        observer.target = null;
-        observer.source = null;
-        observer.context = null;
-    }
-    /** @internal */
-    handleChange(binding, observer) {
-        const target = observer.target;
-        const source = observer.source;
-        const context = observer.context;
-        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
-    }
-}
-/**
- * A binding behavior for handling events.
- * @public
- */
-class EventBinding {
-    /**
-     * Creates an instance of EventBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     */
-    constructor(directive) {
-        this.directive = directive;
-        this.sourceProperty = `${directive.id}-s`;
-        this.contextProperty = `${directive.id}-c`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = source;
-        target[this.contextProperty] = context;
-        target.addEventListener(directive.targetAspect, this, directive.options);
+            view.isComposed = false;
+            view.remove();
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
+            }
+            else {
+                view.unbind();
+            }
+        }
+        target.textContent = value;
     }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = target[this.contextProperty] = null;
-        target.removeEventListener(directive.targetAspect, this, directive.options);
+}
+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);
+        }
     }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
+    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;
     }
-    /**
-     * @internal
-     */
-    handleEvent(event) {
-        const target = event.currentTarget;
-        ExecutionContext.setEvent(event);
-        const result = this.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
+    // Remove classes from the previous version.
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
+            tokenList.remove(name);
         }
     }
 }
-/**
- * The default onChange binding configuration.
- * @public
- */
-const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
-/**
- * The default onTime binding configuration.
- * @public
- */
-const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
-    once: true,
-});
+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
@@ -1902,19 +2286,15 @@ const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
 class HTMLBindingDirective {
     /**
      * Creates an instance of HTMLBindingDirective.
-     * @param binding - The binding to apply.
-     * @param mode - The binding mode to use when applying the binding.
-     * @param options - The options to configure the binding with.
+     * @param dataBinding - The binding configuration to apply.
      */
-    constructor(binding, mode, options) {
-        this.binding = binding;
-        this.mode = mode;
-        this.options = options;
-        this.factory = null;
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
         /**
          * The type of aspect to target.
          */
-        this.aspectType = Aspect.content;
+        this.aspectType = DOMAspect.content;
     }
     /**
      * Creates HTML to be used within a template.
@@ -1925,31 +2305,114 @@ class HTMLBindingDirective {
     }
     /**
      * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
-        if (this.factory == null) {
-            if (this.targetAspect === "innerHTML") {
-                this.binding = createInnerHTMLBinding(this.binding);
+    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);
+        }
+        return this;
+    }
+    /** @internal */
+    bind(controller) {
+        var _a;
+        const target = controller.targets[this.targetNodeId];
+        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;
+                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();
             }
-            this.factory = this.mode[this.aspectType](this);
         }
-        return this.factory.createBehavior(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 a binding directive with the specified configuration.
- * @param binding - The binding expression.
- * @param config - The binding configuration.
- * @returns A binding directive.
+ * 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 bind(binding, config = onChange) {
-    if (!("mode" in config)) {
-        config = onChange(config);
-    }
-    return new HTMLBindingDirective(binding, config.mode, config.options);
+function bind(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OnChangeBinding(expression, policy, isVolatile);
+}
+/**
+ * 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);
+}
+/**
+ * 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 OnChangeBinding(expression);
+    config.options = options;
+    return config;
+}
+/**
+ * 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 removeNodeSequence(firstNode, lastNode) {
@@ -1978,17 +2441,92 @@ class HTMLView {
         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 = null;
+        this.context = this;
+        /**
+         * The index of the current item within a repeat context.
+         */
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return ExecutionContext.getEvent();
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst() {
+        return this.index === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail() {
+        return this.event.detail;
+    }
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget() {
+        return this.event.target;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -2005,8 +2543,10 @@ class HTMLView {
             node.parentNode.insertBefore(this.fragment, node);
         }
         else {
-            const parentNode = node.parentNode;
             const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
             let current = this.firstChild;
             let next;
             while (current !== end) {
@@ -2041,58 +2581,61 @@ class HTMLView {
         removeNodeSequence(this.firstChild, this.lastChild);
         this.unbind();
     }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source, context) {
-        let behaviors = this.behaviors;
-        const oldSource = this.source;
-        if (oldSource === source) {
+    bind(source, context = this) {
+        if (this.source === source) {
             return;
         }
-        this.source = source;
-        this.context = context;
-        const targets = this.targets;
-        if (oldSource !== null) {
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                const current = behaviors[i];
-                current.unbind(oldSource, context, targets);
-                current.bind(source, context, targets);
-            }
-        }
-        else if (behaviors === null) {
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
             this.behaviors = behaviors = new Array(this.factories.length);
             const factories = this.factories;
             for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const behavior = factories[i].createBehavior(targets);
-                behavior.bind(source, context, targets);
+                const behavior = factories[i].createBehavior();
+                behavior.bind(this);
                 behaviors[i] = behavior;
             }
         }
         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(source, context, targets);
+                behaviors[i].bind(this);
             }
         }
+        this.isBound = true;
     }
     /**
      * Unbinds a view's behaviors from its binding source.
      */
     unbind() {
-        const oldSource = this.source;
-        if (oldSource === null) {
+        if (!this.isBound || this.source === null) {
             return;
         }
-        const targets = this.targets;
-        const context = this.context;
-        const behaviors = this.behaviors;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource, context, targets);
-        }
+        this.evaluateUnbindables();
         this.source = null;
-        this.context = 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.
@@ -2108,6 +2651,8 @@ class HTMLView {
         }
     }
 }
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
 
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -2116,21 +2661,42 @@ const next = {
     index: 0,
     node: null,
 };
+function tryWarn(name) {
+    if (!name.startsWith("fast-")) {
+        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+    }
+}
+const warningHost = new Proxy(document.createElement("div"), {
+    get(target, property) {
+        tryWarn(property);
+        const value = Reflect.get(target, property);
+        return isFunction(value) ? value.bind(target) : value;
+    },
+    set(target, property, value) {
+        tryWarn(property);
+        return Reflect.set(target, property, value);
+    },
+});
 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() {
@@ -2166,7 +2732,7 @@ class CompilationContext {
         const fragment = this.fragment.cloneNode(true);
         const targets = Object.create(this.proto);
         targets.r = fragment;
-        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost;
         for (const id of this.nodeIds) {
             targets[id]; // trigger locator
         }
@@ -2183,19 +2749,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime);
-                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);
         }
     }
 }
@@ -2220,7 +2786,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -2252,7 +2819,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;
     }
@@ -2266,45 +2833,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;
@@ -2315,18 +2865,18 @@ const Compiler = {
         }
         // 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");
@@ -2345,34 +2895,88 @@ 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;
-            return x.binding;
+            binding = x.dataBinding || binding;
+            isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
+            return x.dataBinding.evaluate;
         });
-        const binding = (scope, context) => {
+        const expression = (scope, context) => {
             let output = "";
             for (let i = 0; i < partCount; ++i) {
                 output += finalParts[i](scope, context);
             }
             return output;
         };
-        const directive = bind(binding);
-        Aspect.assign(directive, sourceAspect);
+        binding.evaluate = expression;
+        binding.isVolatile = isVolatile;
+        binding.policy = bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy;
+        const directive = new HTMLBindingDirective(binding);
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };
 
+// 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"'`<>=]*|"[^"]*|'[^']*))$/;
+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
@@ -2382,9 +2986,16 @@ 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;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.html = html;
         this.factories = factories;
     }
@@ -2394,10 +3005,34 @@ class ViewTemplate {
      */
     create(hostBindingTarget) {
         if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.factories);
+            this.result = Compiler.compile(this.html, this.factories, this.policy);
         }
         return this.result.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 */);
+        }
+        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.
      * @param source - The data source to bind the template to.
@@ -2405,75 +3040,72 @@ class ViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source, host, hostBindingTarget, context) {
-        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
-        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+    render(source, host, hostBindingTarget) {
+        const view = this.create(hostBindingTarget);
+        view.bind(source);
         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]);
-    }
-    return value.createHTML(add);
-}
-/**
- * Transforms a template literal string into a ViewTemplate.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @remarks
- * The html helper supports interpolation of strings, numbers, binding expressions,
- * 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(bind(currentValue), currentString, add);
-        }
-        else if (isString(currentValue)) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                const directive = bind(() => currentValue, oneTime);
-                Aspect.assign(directive, match[2]);
-                html += directive.createHTML(add);
-            }
-            else {
-                html += currentValue;
+    /**
+     * 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(bind(currentValue));
             }
-        }
-        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(bind(() => currentValue, oneTime), currentString, add);
-        }
-        else {
-            if (definition.aspected) {
-                html += createAspectedHTML(currentValue, currentString, add);
+            else if (currentValue instanceof Binding) {
+                currentValue = new HTMLBindingDirective(currentValue);
             }
-            else {
-                html += currentValue.createHTML(add);
+            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);
+    }
+}
+/**
+ * Transforms a template literal string into a ViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+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.
@@ -2481,20 +3113,12 @@ function html(strings, ...values) {
  */
 class RefDirective extends StatelessAttachedAttributeDirective {
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context, targets) {
-        source[this.options] = targets[this.nodeId];
+    bind(controller) {
+        controller.source[this.options] = controller.targets[this.targetNodeId];
     }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
 }
 HTMLDirective.define(RefDirective);
 /**
@@ -2506,27 +3130,34 @@ const ref = (propertyName) => new RefDirective(propertyName);
 
 /**
  * A directive that enables basic conditional rendering in a template.
- * @param binding - The condition to test for rendering.
+ * @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.
  * @public
  */
-function when(binding, templateOrTemplateBinding) {
-    const getTemplate = isFunction(templateOrTemplateBinding)
+function when(condition, templateOrTemplateBinding) {
+    const dataBinding = isFunction(condition) ? condition : () => condition;
+    const templateBinding = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding
         : () => templateOrTemplateBinding;
-    return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
 }
 
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
 });
-function bindWithoutPositioning(view, items, index, context) {
-    view.bind(items[index], context);
+function bindWithoutPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.bind(items[index]);
 }
-function bindWithPositioning(view, items, index, context) {
-    view.bind(items[index], context.createItemContext(index, items.length));
+function bindWithPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.context.length = items.length;
+    view.context.index = index;
+    view.bind(items[index]);
 }
 /**
  * A behavior that renders a template for each item in an array.
@@ -2536,57 +3167,46 @@ class RepeatBehavior {
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.
-     * @param itemsBinding - The array to render.
+     * @param dataBinding - The array to render.
      * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
      * @param templateBinding - The template to render for each item.
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
-        this.location = location;
-        this.itemsBinding = itemsBinding;
-        this.templateBinding = templateBinding;
-        this.options = options;
-        this.source = null;
-        this.views = [];
+    constructor(directive) {
+        this.directive = directive;
         this.items = null;
         this.itemsObserver = null;
-        this.context = void 0;
-        this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
-        if (options.positioning) {
+        /** @internal */
+        this.views = [];
+        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
     }
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context) {
-        this.source = source;
-        this.context = context;
-        this.childContext = context.createChildContext(source);
-        this.items = this.itemsBindingObserver.observe(source, this.context);
-        this.template = this.templateBindingObserver.observe(source, this.context);
+    bind(controller) {
+        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();
+        controller.onUnbind(this);
     }
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
      */
     unbind() {
-        this.source = null;
-        this.items = null;
         if (this.itemsObserver !== null) {
             this.itemsObserver.unsubscribe(this);
         }
         this.unbindAllViews();
-        this.itemsBindingObserver.dispose();
-        this.templateBindingObserver.dispose();
     }
     /**
      * Handles changes in the array, its items, and the repeat template.
@@ -2594,15 +3214,18 @@ class RepeatBehavior {
      * @param args - The details about what was changed.
      */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+        if (args === this.itemsBindingObserver) {
+            this.items = this.itemsBindingObserver.bind(this.controller);
             this.observeItems();
             this.refreshAllViews();
         }
-        else if (source === this.templateBinding) {
-            this.template = this.templateBindingObserver.observe(this.source, this.context);
+        else if (args === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
             this.refreshAllViews(true);
         }
+        else if (!args[0]) {
+            return;
+        }
         else if (args[0].reset) {
             this.refreshAllViews();
         }
@@ -2627,39 +3250,57 @@ class RepeatBehavior {
     }
     updateViews(splices) {
         const views = this.views;
-        const childContext = this.childContext;
-        const totalRemoved = [];
         const bindView = this.bindView;
-        let removeDelta = 0;
-        for (let i = 0, ii = splices.length; i < ii; ++i) {
-            const splice = splices[i];
-            const removed = splice.removed;
-            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-            removeDelta -= splice.addedCount;
-        }
         const items = this.items;
         const template = this.template;
+        const controller = this.controller;
+        const recycle = this.directive.options.recycle;
+        const leftoverViews = [];
+        let leftoverIndex = 0;
+        let availableViews = 0;
         for (let i = 0, ii = splices.length; i < ii; ++i) {
             const splice = splices[i];
+            const removed = splice.removed;
+            let removeIndex = 0;
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
+            const removedViews = views.splice(splice.index, removed.length);
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
-                const view = this.options.recycle && totalRemoved.length > 0
-                    ? totalRemoved.shift()
-                    : template.create();
+                let view;
+                if (recycle && availableViews > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                        view = removedViews[removeIndex];
+                        removeIndex++;
+                    }
+                    else {
+                        view = leftoverViews[leftoverIndex];
+                        leftoverIndex++;
+                    }
+                    availableViews--;
+                }
+                else {
+                    view = template.create();
+                }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
+            if (removedViews[removeIndex]) {
+                leftoverViews.push(...removedViews.slice(removeIndex));
+            }
         }
-        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-            totalRemoved[i].dispose();
+        for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+            leftoverViews[i].dispose();
         }
-        if (this.options.positioning) {
-            for (let i = 0, ii = views.length; i < ii; ++i) {
-                views[i].context.updatePosition(i, ii);
+        if (this.directive.options.positioning) {
+            for (let i = 0, viewsLength = views.length; i < viewsLength; ++i) {
+                const context = views[i].context;
+                context.length = viewsLength;
+                context.index = i;
             }
         }
     }
@@ -2668,11 +3309,11 @@ class RepeatBehavior {
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
-        const childContext = this.childContext;
+        const controller = this.controller;
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged || !this.options.recycle) {
+        if (itemsLength === 0 || templateChanged || !this.directive.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -2682,7 +3323,7 @@ class RepeatBehavior {
             this.views = views = new Array(itemsLength);
             for (let i = 0; i < itemsLength; ++i) {
                 const view = template.create();
-                bindView(view, items, i, childContext);
+                bindView(view, items, i, controller);
                 views[i] = view;
                 view.insertBefore(location);
             }
@@ -2693,11 +3334,11 @@ class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                 }
                 else {
                     const view = template.create();
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                     views.push(view);
                     view.insertBefore(location);
                 }
@@ -2722,17 +3363,15 @@ class RepeatBehavior {
 class RepeatDirective {
     /**
      * Creates an instance of RepeatDirective.
-     * @param itemsBinding - The binding that provides the array to render.
+     * @param dataBinding - The binding that provides the array to render.
      * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(itemsBinding, templateBinding, options) {
-        this.itemsBinding = itemsBinding;
+    constructor(dataBinding, templateBinding, options) {
+        this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
         ArrayObserver.enable();
-        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -2745,24 +3384,23 @@ class RepeatDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(targets) {
-        return new RepeatBehavior(targets[this.nodeId], this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+    createBehavior() {
+        return new RepeatBehavior(this);
     }
 }
 HTMLDirective.define(RepeatDirective);
 /**
  * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * @param items - The array to render.
+ * @param template - The template or a template binding used obtain a template
  * to render for each item in the array.
  * @param options - Options used to turn on special repeat features.
  * @public
  */
-function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, options);
+function repeat(items, template, options = defaultRepeatOptions) {
+    const dataBinding = normalizeBinding(items);
+    const templateBinding = normalizeBinding(template);
+    return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
 const selectElements = (value) => value.nodeType === 1;
@@ -2781,9 +3419,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.
@@ -2791,11 +3435,12 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    bind(source, context, targets) {
-        const target = targets[this.nodeId];
-        target[this.sourceProperty] = source;
-        this.updateTarget(source, this.computeNodes(target));
+    bind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
+        this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
+        controller.onUnbind(this);
     }
     /**
      * Unbinds this behavior from the source.
@@ -2803,11 +3448,11 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    unbind(source, context, targets) {
-        const target = targets[this.nodeId];
-        this.updateTarget(source, emptyArray);
+    unbind(controller) {
+        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.
@@ -2815,7 +3460,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.
@@ -2911,9 +3556,13 @@ 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));
-        observer.target = target;
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            observer.target = target;
+            target[this.observerProperty] = observer;
+        }
         observer.observe(target, this.options);
     }
     /**
@@ -2954,6 +3603,16 @@ function children(propertyOrOptions) {
 
 const booleanMode = "boolean";
 const reflectMode = "reflect";
+/**
+ * Metadata used to configure a custom attribute's behavior.
+ * @public
+ */
+const AttributeConfiguration = Object.freeze({
+    /**
+     * Locates all attribute configurations associated with a type.
+     */
+    locate: createMetadataLocator(),
+});
 /**
  * A {@link ValueConverter} that converts to and from `boolean` values.
  * @remarks
@@ -2974,6 +3633,20 @@ const booleanConverter = {
             : true;
     },
 };
+/**
+ * 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) {
     if (value === null || value === undefined) {
         return null;
@@ -3091,7 +3764,7 @@ class AttributeDefinition {
      */
     static collect(Owner, ...attributeLists) {
         const attributes = [];
-        attributeLists.push(Owner.attributes);
+        attributeLists.push(AttributeConfiguration.locate(Owner));
         for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
             const list = attributeLists[i];
             if (list === void 0) {
@@ -3121,9 +3794,7 @@ function attr(configOrTarget, prop) {
             // - @attr({...opts})
             config.property = $prop;
         }
-        const attributes = $target.constructor.attributes ||
-            ($target.constructor.attributes = []);
-        attributes.push(config);
+        AttributeConfiguration.locate($target.constructor).push(config);
     }
     if (arguments.length > 1) {
         // Non invocation:
@@ -3141,25 +3812,24 @@ 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
  */
 class FASTElementDefinition {
-    /**
-     * Creates an instance of FASTElementDefinition.
-     * @param type - The type this definition is being created for.
-     * @param nameOrConfig - The name of the element to define or a config object
-     * that describes the element to define.
-     */
     constructor(type, nameOrConfig = type.definition) {
+        var _a;
+        this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
         this.template = nameOrConfig.template;
+        this.registry = (_a = nameOrConfig.registry) !== null && _a !== void 0 ? _a : customElements;
+        const proto = type.prototype;
         const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
         const observedAttributes = new Array(attributes.length);
         const propertyLookup = {};
@@ -3169,9 +3839,13 @@ class FASTElementDefinition {
             observedAttributes[i] = current.attribute;
             propertyLookup[current.name] = current;
             attributeLookup[current.attribute] = current;
+            Observable.defineProperty(proto, current);
         }
+        Reflect.defineProperty(type, "observedAttributes", {
+            value: observedAttributes,
+            enumerable: true,
+        });
         this.attributes = attributes;
-        this.observedAttributes = observedAttributes;
         this.propertyLookup = propertyLookup;
         this.attributeLookup = attributeLookup;
         this.shadowOptions =
@@ -3184,20 +3858,14 @@ class FASTElementDefinition {
             nameOrConfig.elementOptions === void 0
                 ? defaultElementOptions
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
-        this.styles =
-            nameOrConfig.styles === void 0
-                ? void 0
-                : Array.isArray(nameOrConfig.styles)
-                    ? new ElementStyles(nameOrConfig.styles)
-                    : nameOrConfig.styles instanceof ElementStyles
-                        ? nameOrConfig.styles
-                        : new ElementStyles([nameOrConfig.styles]);
+        this.styles = ElementStyles.normalize(nameOrConfig.styles);
+        fastElementRegistry.register(this);
     }
     /**
      * Indicates if this element has been defined in at least one registry.
      */
     get isDefined() {
-        return !!fastElementRegistry.getByType(this.type);
+        return this.platformDefined;
     }
     /**
      * Defines a custom element based on this definition.
@@ -3205,24 +3873,35 @@ class FASTElementDefinition {
      * @remarks
      * This operation is idempotent per registry.
      */
-    define(registry = customElements) {
+    define(registry = this.registry) {
         const type = this.type;
-        if (fastElementRegistry.register(this)) {
-            const attributes = this.attributes;
-            const proto = type.prototype;
-            for (let i = 0, ii = attributes.length; i < ii; ++i) {
-                Observable.defineProperty(proto, attributes[i]);
-            }
-            Reflect.defineProperty(type, "observedAttributes", {
-                value: this.observedAttributes,
-                enumerable: true,
-            });
-        }
         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.
@@ -3235,22 +3914,23 @@ FASTElementDefinition.getByType = fastElementRegistry.getByType;
  */
 FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
 
-const shadowRoots = new WeakMap();
 const defaultEventOptions = {
     bubbles: true,
     composed: true,
     cancelable: true,
 };
+const isConnectedPropertyName = "isConnected";
+const shadowRoots = new WeakMap();
 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;
 }
-const isConnectedPropertyName = "isConnected";
+let elementControllerStrategy;
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
  */
-class Controller extends PropertyChangeNotifier {
+class ElementController extends PropertyChangeNotifier {
     /**
      * Creates a Controller to control the specified element.
      * @param element - The element to be controlled by this controller.
@@ -3261,12 +3941,18 @@ class Controller extends PropertyChangeNotifier {
     constructor(element, definition) {
         super(element);
         this.boundObservables = null;
-        this.behaviors = null;
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._styles = 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;
+        this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
          * when the notifier for the Controller itself is being requested. The
@@ -3282,7 +3968,12 @@ class Controller extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        this.element = element;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+        this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
         if (shadowOptions !== void 0) {
@@ -3320,11 +4011,7 @@ class Controller extends PropertyChangeNotifier {
      */
     get isConnected() {
         Observable.track(this, isConnectedPropertyName);
-        return this._isConnected;
-    }
-    setIsConnected(value) {
-        this._isConnected = value;
-        Observable.notify(this, isConnectedPropertyName);
+        return this.stage === 1 /* Stages.connected */;
     }
     /**
      * Gets/sets the template used to render the component.
@@ -3336,9 +4023,9 @@ class Controller extends PropertyChangeNotifier {
         // 1. Template overrides take top precedence.
         if (this._template === null) {
             const definition = this.definition;
-            if (this.element.resolveTemplate) {
+            if (this.source.resolveTemplate) {
                 // 2. Allow for element instance overrides next.
-                this._template = this.element.resolveTemplate();
+                this._template = this.source.resolveTemplate();
             }
             else if (definition.template) {
                 // 3. Default to the static definition.
@@ -3357,56 +4044,104 @@ class Controller extends PropertyChangeNotifier {
         }
     }
     /**
-     * Gets/sets the primary styles used for the component.
-     * @remarks
-     * This value can only be accurately read after connect but can be set at any time.
+     * The main set of styles used for the component, independent
+     * of any dynamically added styles.
      */
-    get styles() {
+    get mainStyles() {
         var _a;
         // 1. Styles overrides take top precedence.
-        if (this._styles === null) {
+        if (this._mainStyles === null) {
             const definition = this.definition;
-            if (this.element.resolveStyles) {
+            if (this.source.resolveStyles) {
                 // 2. Allow for element instance overrides next.
-                this._styles = this.element.resolveStyles();
+                this._mainStyles = this.source.resolveStyles();
             }
             else if (definition.styles) {
                 // 3. Default to the static definition.
-                this._styles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+                this._mainStyles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
             }
         }
-        return this._styles;
+        return this._mainStyles;
     }
-    set styles(value) {
-        if (this._styles === value) {
+    set mainStyles(value) {
+        if (this._mainStyles === value) {
             return;
         }
-        if (this._styles !== null) {
-            this.removeStyles(this._styles);
+        if (this._mainStyles !== null) {
+            this.removeStyles(this._mainStyles);
         }
-        this._styles = value;
+        this._mainStyles = value;
         if (!this.needsInitialization) {
             this.addStyles(value);
         }
     }
+    /**
+     * Adds the behavior to the component.
+     * @param behavior - The behavior to add.
+     */
+    addBehavior(behavior) {
+        var _a, _b;
+        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
+        const count = (_b = targetBehaviors.get(behavior)) !== null && _b !== void 0 ? _b : 0;
+        if (count === 0) {
+            targetBehaviors.set(behavior, 1);
+            behavior.addedCallback && behavior.addedCallback(this);
+            if (behavior.connectedCallback &&
+                !this.guardBehaviorConnection &&
+                (this.stage === 1 /* Stages.connected */ || this.stage === 0 /* Stages.connecting */)) {
+                behavior.connectedCallback(this);
+            }
+        }
+        else {
+            targetBehaviors.set(behavior, count + 1);
+        }
+    }
+    /**
+     * Removes the behavior from the component.
+     * @param behavior - The behavior to remove.
+     * @param force - Forces removal even if this behavior was added more than once.
+     */
+    removeBehavior(behavior, force = false) {
+        const targetBehaviors = this.behaviors;
+        if (targetBehaviors === null) {
+            return;
+        }
+        const count = targetBehaviors.get(behavior);
+        if (count === void 0) {
+            return;
+        }
+        if (count === 1 || force) {
+            targetBehaviors.delete(behavior);
+            if (behavior.disconnectedCallback && this.stage !== 3 /* Stages.disconnected */) {
+                behavior.disconnectedCallback(this);
+            }
+            behavior.removedCallback && behavior.removedCallback(this);
+        }
+        else {
+            targetBehaviors.set(behavior, count - 1);
+        }
+    }
     /**
      * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
     addStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
         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) {
-                this.addBehaviors(sourceBehaviors);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
@@ -3415,121 +4150,82 @@ class Controller extends PropertyChangeNotifier {
      * @param styles - the styles to remove.
      */
     removeStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
         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) {
-                this.removeBehaviors(sourceBehaviors);
-            }
-        }
-    }
-    /**
-     * Adds behaviors to this element.
-     * @param behaviors - The behaviors to add.
-     */
-    addBehaviors(behaviors) {
-        var _a;
-        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
-        const length = behaviors.length;
-        const behaviorsToBind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);
-            }
-            else {
-                targetBehaviors.set(behavior, 1);
-                behaviorsToBind.push(behavior);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToBind.length; ++i) {
-                behaviorsToBind[i].bind(element, context);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
     /**
-     * Removes behaviors from this element.
-     * @param behaviors - The behaviors to remove.
-     * @param force - Forces unbinding of behaviors.
+     * Runs connected lifecycle behavior on the associated element.
      */
-    removeBehaviors(behaviors, force = false) {
-        const targetBehaviors = this.behaviors;
-        if (targetBehaviors === null) {
+    connect() {
+        if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
-        const length = behaviors.length;
-        const behaviorsToUnbind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                const count = targetBehaviors.get(behavior) - 1;
-                count === 0 || force
-                    ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior)
-                    : targetBehaviors.set(behavior, count);
+        this.stage = 0 /* Stages.connecting */;
+        // If we have any observables that were bound, re-apply their values.
+        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;
         }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element, context);
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            this.guardBehaviorConnection = true;
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
             }
+            this.guardBehaviorConnection = false;
         }
-    }
-    /**
-     * Runs connected lifecycle behavior on the associated element.
-     */
-    onConnectedCallback() {
-        if (this._isConnected) {
-            return;
-        }
-        const element = this.element;
-        const context = ExecutionContext.default;
         if (this.needsInitialization) {
-            this.finishInitialization();
+            this.renderTemplate(this.template);
+            this.addStyles(this.mainStyles);
+            this.needsInitialization = false;
         }
         else if (this.view !== null) {
-            this.view.bind(element, context);
-        }
-        const behaviors = this.behaviors;
-        if (behaviors !== null) {
-            for (const behavior of behaviors.keys()) {
-                behavior.bind(element, context);
-            }
+            this.view.bind(this.source);
         }
-        this.setIsConnected(true);
+        this.stage = 1 /* Stages.connected */;
+        Observable.notify(this, isConnectedPropertyName);
     }
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
-    onDisconnectedCallback() {
-        if (!this._isConnected) {
+    disconnect() {
+        if (this.stage !== 1 /* Stages.connected */) {
             return;
         }
-        this.setIsConnected(false);
-        const view = this.view;
-        if (view !== null) {
-            view.unbind();
+        this.stage = 2 /* Stages.disconnecting */;
+        Observable.notify(this, isConnectedPropertyName);
+        if (this.view !== null) {
+            this.view.unbind();
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (const behavior of behaviors.keys()) {
-                behavior.unbind(element, context);
+            for (const key of behaviors.keys()) {
+                key.disconnectedCallback && key.disconnectedCallback(this);
             }
         }
+        this.stage = 3 /* Stages.disconnected */;
     }
     /**
      * Runs the attribute changed callback for the associated element.
@@ -3540,7 +4236,7 @@ class Controller extends PropertyChangeNotifier {
     onAttributeChangedCallback(name, oldValue, newValue) {
         const attrDef = this.definition.attributeLookup[name];
         if (attrDef !== void 0) {
-            attrDef.onAttributeChangedCallback(this.element, newValue);
+            attrDef.onAttributeChangedCallback(this.source, newValue);
         }
     }
     /**
@@ -3552,33 +4248,17 @@ class Controller extends PropertyChangeNotifier {
      * Only emits events if connected.
      */
     emit(type, detail, options) {
-        if (this._isConnected) {
-            return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+        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.element;
-        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.styles);
-        this.needsInitialization = false;
-    }
     renderTemplate(template) {
         var _a;
-        const element = this.element;
         // When getting the host to render to, we start by looking
         // up the shadow root. If there isn't one, then that means
         // we're doing a Light DOM render to the element's direct children.
+        const element = this.source;
         const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
         if (this.view !== null) {
             // If there's already a view, we need to unbind and remove through dispose.
@@ -3595,6 +4275,8 @@ class Controller extends PropertyChangeNotifier {
         if (template) {
             // If a new template was provided, render it.
             this.view = template.render(element, host, element);
+            this.view.sourceLifetime =
+                SourceLifetime.coupled;
         }
     }
     /**
@@ -3614,31 +4296,146 @@ class Controller extends PropertyChangeNotifier {
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new Controller(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;
+    }
+}
+// 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) {
+        const t = normalizeStyleTarget(target);
+        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+    }
+    removeStylesFrom(target) {
+        const t = normalizeStyleTarget(target);
+        const sheets = this.sheets;
+        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+    }
+}
+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}`);
+        styles[0].parentNode;
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
     }
 }
+ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
+    ? AdoptedStyleSheetsStrategy
+    : StyleElementStrategy);
 
 /* 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();
-            Controller.forCustomElement(this);
+            ElementController.forCustomElement(this);
         }
         $emit(type, detail, options) {
             return this.$fastController.emit(type, detail, options);
         }
         connectedCallback() {
-            this.$fastController.onConnectedCallback();
+            this.$fastController.connect();
         }
         disconnectedCallback() {
-            this.$fastController.onDisconnectedCallback();
+            this.$fastController.disconnect();
         }
         attributeChangedCallback(name, oldValue, newValue) {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }
     };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
+}
+function compose(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef);
+    }
+    return FASTElementDefinition.compose(this, type);
+}
+function define(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef).define().type;
+    }
+    return FASTElementDefinition.compose(this, type).define().type;
+}
+function from(BaseType) {
+    return createFASTElement(BaseType);
 }
 /**
  * A minimal base class for FASTElements that also provides
@@ -3651,26 +4448,19 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * provided base type.
      * @param BaseType - The base element type to inherit from.
      */
-    from(BaseType) {
-        return createFASTElement(BaseType);
-    },
+    from,
     /**
      * Defines a platform custom element based on the provided type and definition.
      * @param type - The custom element type to define.
      * @param nameOrDef - The name of the element to define or a definition object
      * that describes the element to define.
      */
-    define(type, nameOrDef) {
-        return this.metadata(type, nameOrDef).define().type;
-    },
+    define,
     /**
      * Defines metadata for a FASTElement which can be used to later define the element.
-     * IMPORTANT: This API will be renamed to "compose" in a future beta.
      * @public
      */
-    metadata(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef);
-    },
+    compose,
 });
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -3681,8 +4471,10 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
 function customElement(nameOrDef) {
     /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
     return function (type) {
-        FASTElement.define(type, nameOrDef);
+        define(type, nameOrDef);
     };
 }
 
-export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeDefinition, BindingConfig, BindingMode, CSSDirective, ChangeBinding, ChildrenDirective, Compiler, Controller, DOM, ElementStyles, EventBinding, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, OneTimeBinding, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, UpdateBinding, Updates, ViewTemplate, attr, bind, booleanConverter, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, nullableNumberConverter, observable, onChange, oneTime, ref, repeat, slotted, volatile, when };
+DOM.setPolicy(DOMPolicy.create());
+
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };