@microsoft/fast-element 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/fast-element.js

@@ -147,6 +147,27 @@ function createTypeRegistry() {
         },
     });
 }
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+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
@@ -388,6 +409,21 @@ 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
@@ -396,7 +432,6 @@ const Observable = FAST.getById(2 /* 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 +446,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;
@@ -467,6 +490,22 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
         }
+        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();
@@ -476,7 +515,7 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             this.needsRefresh = this.isVolatileBinding;
             let result;
             try {
-                result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+                result = this.binding(source, context);
             }
             finally {
                 watcher = previousWatcher;
@@ -667,123 +706,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;
-    }
-    /**
-     * The current event within an event handler.
-     */
-    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;
-    }
+const ExecutionContext = Object.freeze({
     /**
-     * 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.
+     * A default execution context.
      */
-    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
@@ -1581,11 +1535,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);
@@ -1724,6 +1678,67 @@ const Parser = Object.freeze({
     },
 });
 
+/**
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
+ */
+const ViewBehaviorOrchestrator = Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                const nodeId = factory.nodeId || (factory.nodeId = nextId());
+                factory.id || (factory.id = nextId());
+                this.addTarget(nodeId, target);
+                this.addBehavior(factory.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -1769,6 +1784,15 @@ function htmlDirective(options) {
  * @public
  */
 class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+    }
 }
 /**
  * The type of HTML aspect to target.
@@ -1868,13 +1892,6 @@ class StatelessAttachedAttributeDirective {
          */
         this.id = nextId();
     }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
     /**
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.
@@ -1884,6 +1901,13 @@ class StatelessAttachedAttributeDirective {
     createHTML(add) {
         return Markup.attribute(add(this));
     }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return this;
+    }
 }
 
 const createInnerHTMLBinding = globalThis.TrustedHTML
@@ -1896,29 +1920,19 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
     }
     : (binding) => binding;
 class OnChangeBinding extends Binding {
-    constructor(evaluate, isVolatile) {
-        super();
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
     createObserver(_, subscriber) {
         return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
 class OneTimeBinding extends Binding {
-    constructor(evaluate) {
-        super();
-        this.evaluate = evaluate;
-    }
     createObserver() {
         return this;
     }
-    observe(source, context) {
-        return this.evaluate(source, context);
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
     }
-    dispose() { }
 }
-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) {
@@ -1950,14 +1964,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);
             view.insertBefore(target);
             target.$fastView = view;
             target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(source, context);
+            view.bind(controller.source);
         }
     }
     else {
@@ -1977,10 +1991,9 @@ function updateContentTarget(target, aspect, value, source, context) {
         target.textContent = value;
     }
 }
-function updateTokenListTarget(target, aspect, value) {
+function updateTokenList(target, aspect, value) {
     var _a;
-    const directive = this.directive;
-    const lookup = `${directive.id}-t`;
+    const lookup = `${this.id}-t`;
     const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
     let currentVersion = state.c;
@@ -2010,154 +2023,8 @@ function updateTokenListTarget(target, aspect, value) {
         }
     }
 }
-/**
- * A binding behavior for bindings that change.
- * @public
- */
-class BindingBehavior {
-    /**
-     * 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) {
-        this.directive = directive;
-        this.updateTarget = updateTarget;
-        this.observerProperty = `${directive.id}-o`;
-    }
-    /**
-     * 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);
-    }
-    /**
-     * 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] = this.directive.dataBinding.createObserver(this.directive, this)));
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
-}
-/**
- * A special binding behavior that can bind node content.
- * @public
- */
-class ContentBehavior extends BindingBehavior {
-    /**
-     * 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) {
-        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;
-        }
-    }
-}
-/**
- * A binding behavior for handling events.
- * @public
- */
-class EventBehavior {
-    /**
-     * 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.dataBinding.options);
-    }
-    /**
-     * 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.dataBinding.options);
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
-    /**
-     * @internal
-     */
-    handleEvent(event) {
-        const target = event.currentTarget;
-        ExecutionContext.setEvent(event);
-        const result = this.directive.dataBinding.evaluate(target[this.sourceProperty], target[this.contextProperty]);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
-        }
-    }
-}
+const setProperty = (t, a, v) => (t[a] = v);
+const eventTarget = () => void 0;
 /**
  * A directive that applies bindings.
  * @public
@@ -2169,7 +2036,7 @@ class HTMLBindingDirective {
      */
     constructor(dataBinding) {
         this.dataBinding = dataBinding;
-        this.factory = null;
+        this.updateTarget = null;
         /**
          * The unique id of the factory.
          */
@@ -2178,6 +2045,9 @@ class HTMLBindingDirective {
          * The type of aspect to target.
          */
         this.aspectType = Aspect.content;
+        /** @internal */
+        this.bind = this.bindDefault;
+        this.data = `${this.id}-d`;
     }
     /**
      * Creates HTML to be used within a template.
@@ -2188,37 +2058,87 @@ class HTMLBindingDirective {
     }
     /**
      * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
-        if (this.factory == null) {
+    createBehavior() {
+        if (this.updateTarget === null) {
             if (this.targetAspect === "innerHTML") {
                 this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
             }
             switch (this.aspectType) {
                 case 1:
-                    this.factory = new BindingBehavior(this, DOM.setAttribute);
+                    this.updateTarget = DOM.setAttribute;
                     break;
                 case 2:
-                    this.factory = new BindingBehavior(this, DOM.setBooleanAttribute);
+                    this.updateTarget = DOM.setBooleanAttribute;
                     break;
                 case 3:
-                    this.factory = new BindingBehavior(this, (t, a, v) => (t[a] = v));
+                    this.updateTarget = setProperty;
                     break;
                 case 4:
-                    this.factory = new ContentBehavior(this, updateContentTarget);
+                    this.bind = this.bindContent;
+                    this.updateTarget = updateContent;
                     break;
                 case 5:
-                    this.factory = new BindingBehavior(this, updateTokenListTarget);
+                    this.updateTarget = updateTokenList;
                     break;
                 case 6:
-                    this.factory = new EventBehavior(this);
+                    this.bind = this.bindEvent;
+                    this.updateTarget = eventTarget;
                     break;
                 default:
                     throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
         }
-        return this.factory.createBehavior(targets);
+        return this;
+    }
+    /** @internal */
+    bindDefault(controller) {
+        var _a;
+        const target = controller.targets[this.nodeId];
+        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+        observer.target = target;
+        observer.controller = controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+        if (this.updateTarget === updateContent) {
+            controller.onUnbind(this);
+        }
+    }
+    /** @internal */
+    bindContent(controller) {
+        this.bindDefault(controller);
+        controller.onUnbind(this);
+    }
+    /** @internal */
+    bindEvent(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.data] = controller;
+        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        ExecutionContext.setEvent(event);
+        const controller = target[this.data];
+        const result = this.dataBinding.evaluate(controller.source, controller.context);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
+        }
+    }
+    /** @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 });
@@ -2293,17 +2213,83 @@ class HTMLView {
         this.factories = factories;
         this.targets = targets;
         this.behaviors = null;
+        this.unbindables = [];
         /**
          * The data that the view is bound to.
          */
         this.source = null;
+        this.isBound = false;
+        this.selfContained = false;
         /**
-         * The execution context the view is running within.
+         * The index of the current item within a repeat context.
          */
-        this.context = null;
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
+    /**
+     * The execution context the view is running within.
+     */
+    get context() {
+        return this;
+    }
+    /**
+     * 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.
@@ -2358,58 +2344,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;
+    bind(source) {
         const oldSource = this.source;
         if (oldSource === source) {
             return;
         }
+        let behaviors = this.behaviors;
         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) {
+        if (behaviors === null) {
             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 (oldSource !== null) {
+                this.evaluateUnbindables();
+            }
             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() {
+        if (!this.isBound) {
+            return;
+        }
         const oldSource = this.source;
         if (oldSource === 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.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.
@@ -2425,6 +2414,8 @@ class HTMLView {
         }
     }
 }
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
 
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -2745,9 +2736,9 @@ 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;
     }
@@ -2824,20 +2815,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.nodeId];
     }
-    /**
-     * 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);
 /**
@@ -2866,11 +2849,17 @@ 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.
@@ -2886,15 +2875,11 @@ class RepeatBehavior {
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(directive, location) {
+    constructor(directive) {
         this.directive = directive;
-        this.location = location;
-        this.source = null;
         this.views = [];
         this.items = null;
         this.itemsObserver = null;
-        this.context = void 0;
-        this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
         this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
         this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
@@ -2903,32 +2888,26 @@ class RepeatBehavior {
         }
     }
     /**
-     * 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.nodeId];
+        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.
@@ -2937,12 +2916,12 @@ class RepeatBehavior {
      */
     handleChange(source, args) {
         if (args === this.itemsBindingObserver) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+            this.items = this.itemsBindingObserver.bind(this.controller);
             this.observeItems();
             this.refreshAllViews();
         }
         else if (args === this.templateBindingObserver) {
-            this.template = this.templateBindingObserver.observe(this.source, this.context);
+            this.template = this.templateBindingObserver.bind(this.controller);
             this.refreshAllViews(true);
         }
         else if (!args[0]) {
@@ -2972,10 +2951,10 @@ class RepeatBehavior {
     }
     updateViews(splices) {
         const views = this.views;
-        const childContext = this.childContext;
         const bindView = this.bindView;
         const items = this.items;
         const template = this.template;
+        const controller = this.controller;
         const recycle = this.directive.options.recycle;
         const leftoverViews = [];
         let leftoverIndex = 0;
@@ -2987,13 +2966,14 @@ class RepeatBehavior {
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
             const removedViews = views.splice(splice.index, removed.length);
-            availableViews = leftoverViews.length + removedViews.length;
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
                 let view;
                 if (recycle && availableViews > 0) {
-                    if (removeIndex <= availableViews && removedViews.length > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
                         view = removedViews[removeIndex];
                         removeIndex++;
                     }
@@ -3007,7 +2987,7 @@ class RepeatBehavior {
                     view = template.create();
                 }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
             if (removedViews[removeIndex]) {
@@ -3019,7 +2999,9 @@ class RepeatBehavior {
         }
         if (this.directive.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
-                views[i].context.updatePosition(i, ii);
+                const context = views[i].context;
+                context.length = i;
+                context.index = ii;
             }
         }
     }
@@ -3028,7 +3010,7 @@ 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;
@@ -3042,7 +3024,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);
             }
@@ -3053,11 +3035,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);
                 }
@@ -3107,8 +3089,8 @@ 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(this, targets[this.nodeId]);
+    createBehavior() {
+        return new RepeatBehavior(this);
     }
 }
 HTMLDirective.define(RepeatDirective);
@@ -3152,11 +3134,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.nodeId];
+        target[this.sourceProperty] = controller.source;
+        this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
+        controller.onUnbind(this);
     }
     /**
      * Unbinds this behavior from the source.
@@ -3164,9 +3147,9 @@ 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.nodeId];
+        this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
         target[this.sourceProperty] = null;
     }
@@ -3315,6 +3298,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
@@ -3452,7 +3445,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) {
@@ -3482,9 +3475,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:
@@ -3509,6 +3500,7 @@ const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */
  */
 class FASTElementDefinition {
     constructor(type, nameOrConfig = type.definition) {
+        var _a;
         this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
@@ -3516,6 +3508,7 @@ class FASTElementDefinition {
         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);
@@ -3560,7 +3553,7 @@ class FASTElementDefinition {
      * @remarks
      * This operation is idempotent per registry.
      */
-    define(registry = customElements) {
+    define(registry = this.registry) {
         const type = this.type;
         if (!registry.get(this.name)) {
             this.platformDefined = true;
@@ -3594,22 +3587,22 @@ 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";
 /**
  * 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.
@@ -3620,12 +3613,12 @@ 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.behaviors = null;
+        this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
          * when the notifier for the Controller itself is being requested. The
@@ -3641,7 +3634,7 @@ class Controller extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        this.element = element;
+        this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
         if (shadowOptions !== void 0) {
@@ -3695,9 +3688,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.
@@ -3716,48 +3709,92 @@ 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.isConnected) {
+                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.isConnected) {
+                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;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.append(styles);
         }
@@ -3765,7 +3802,9 @@ class Controller extends PropertyChangeNotifier {
             const sourceBehaviors = styles.behaviors;
             styles.addStylesTo(target);
             if (sourceBehaviors !== null) {
-                this.addBehaviors(sourceBehaviors);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
@@ -3774,11 +3813,12 @@ 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;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.removeChild(styles);
         }
@@ -3786,85 +3826,29 @@ class Controller extends PropertyChangeNotifier {
             const sourceBehaviors = styles.behaviors;
             styles.removeStylesFrom(target);
             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);
-            }
-        }
-    }
-    /**
-     * Removes behaviors from this element.
-     * @param behaviors - The behaviors to remove.
-     * @param force - Forces unbinding of behaviors.
-     */
-    removeBehaviors(behaviors, force = false) {
-        const targetBehaviors = this.behaviors;
-        if (targetBehaviors === null) {
-            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);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element, context);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
     /**
      * Runs connected lifecycle behavior on the associated element.
      */
-    onConnectedCallback() {
+    connect() {
         if (this._isConnected) {
             return;
         }
-        const element = this.element;
-        const context = ExecutionContext.default;
         if (this.needsInitialization) {
             this.finishInitialization();
         }
         else if (this.view !== null) {
-            this.view.bind(element, context);
+            this.view.bind(this.source);
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            for (const behavior of behaviors.keys()) {
-                behavior.bind(element, context);
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
             }
         }
         this.setIsConnected(true);
@@ -3872,21 +3856,18 @@ class Controller extends PropertyChangeNotifier {
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
-    onDisconnectedCallback() {
+    disconnect() {
         if (!this._isConnected) {
             return;
         }
         this.setIsConnected(false);
-        const view = this.view;
-        if (view !== null) {
-            view.unbind();
+        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);
             }
         }
     }
@@ -3899,7 +3880,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);
         }
     }
     /**
@@ -3912,12 +3893,12 @@ class Controller extends PropertyChangeNotifier {
      */
     emit(type, detail, options) {
         if (this._isConnected) {
-            return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+            return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;
     }
     finishInitialization() {
-        const element = this.element;
+        const element = this.source;
         const boundObservables = this.boundObservables;
         // If we have any observables that were bound, re-apply their values.
         if (boundObservables !== null) {
@@ -3929,15 +3910,15 @@ class Controller extends PropertyChangeNotifier {
             this.boundObservables = null;
         }
         this.renderTemplate(this.template);
-        this.addStyles(this.styles);
+        this.addStyles(this.mainStyles);
         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.
@@ -3954,6 +3935,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;
         }
     }
     /**
@@ -3973,7 +3956,7 @@ 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 ElementController(element, definition));
     }
 }
 
@@ -3983,16 +3966,16 @@ function createFASTElement(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);
@@ -4052,4 +4035,4 @@ function customElement(nameOrDef) {
     };
 }
 
-export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeDefinition, Binding, BindingBehavior, CSSDirective, ChildrenDirective, Compiler, ContentBehavior, Controller, DOM, ElementStyles, EventBehavior, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, bind, booleanConverter, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };
+export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewBehaviorOrchestrator, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };