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

package/dist/dts/styles/css.d.ts

@@ -1,5 +1,12 @@
+import type { Expression } from "../observation/observable.js";
+import { Binding } from "../binding/binding.js";
 import { CSSDirective } from "./css-directive.js";
 import { ComposableStyles, ElementStyles } from "./element-styles.js";
+/**
+ * Represents the types of values that can be interpolated into a template.
+ * @public
+ */
+export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.
@@ -9,14 +16,14 @@ import { ComposableStyles, ElementStyles } from "./element-styles.js";
  * Use the .partial method to create partial CSS fragments.
  * @public
  */
-export declare type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => ElementStyles) & {
+export declare type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
     /**
      * Transforms a template literal string into partial CSS.
      * @param strings - The string fragments that are interpolated with the values.
      * @param values - The values that are interpolated with the string fragments.
      * @public
      */
-    partial(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): CSSDirective;
+    partial<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]): CSSDirective;
 };
 /**
  * Transforms a template literal string into styles.

package/dist/dts/styles/host.d.ts

@@ -1,14 +1,11 @@
+import type { ExpressionController } from "../observation/observable.js";
 import type { ElementStyles } from "./element-styles.js";
 /**
  * Controls the lifecycle and context of behaviors and styles
  * associated with a component host.
  * @public
  */
-export interface HostController<TSource = any> {
-    /**
-     * The component source.
-     */
-    readonly source: TSource;
+export interface HostController<TSource = any> extends ExpressionController<TSource> {
     /**
      * Indicates whether the host is connected or not.
      */

package/dist/dts/templating/{binding.d.ts → html-binding-directive.d.ts}

@@ -1,6 +1,7 @@
 import { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
 import { DOMAspect, DOMPolicy } from "../dom.js";
-import { AddViewBehaviorFactory, Aspected, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { Binding, BindingDirective } from "../binding/binding.js";
+import { AddViewBehaviorFactory, Aspected, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 /**
  * A simple View that can be interpolated into HTML content.
  * @public
@@ -42,7 +43,7 @@ export interface ContentTemplate {
  * A directive that applies bindings.
  * @public
  */
-export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, ViewBehavior, Aspected {
+export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, ViewBehavior, Aspected, BindingDirective {
     dataBinding: Binding;
     private data;
     private updateTarget;
@@ -97,35 +98,3 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
     /** @internal */
     handleChange(binding: Expression, observer: ExpressionObserver): void;
 }
-/**
- * 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
- */
-export declare function bind<T = any>(expression: Expression<T>, policy?: DOMPolicy, isVolatile?: boolean): Binding<T>;
-/**
- * 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
- */
-export declare function oneTime<T = any>(expression: Expression<T>, policy?: DOMPolicy): Binding<T>;
-/**
- * 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
- */
-export declare function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
-/**
- * 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
- */
-export declare function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;

package/dist/dts/templating/html-directive.d.ts

@@ -1,7 +1,7 @@
 import { DOMAspect, DOMPolicy } from "../dom.js";
-import { Constructable } from "../interfaces.js";
-import type { Subscriber } from "../observation/notifier.js";
-import type { Expression, ExpressionController, ExpressionObserver } from "../observation/observable.js";
+import type { Constructable } from "../interfaces.js";
+import type { Binding } from "../binding/binding.js";
+import type { ExpressionController } from "../observation/observable.js";
 /**
  * The target nodes available to a behavior.
  * @public
@@ -157,44 +157,12 @@ export declare const HTMLDirective: Readonly<{
  * @public
  */
 export declare function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-export declare abstract class Binding<TSource = any, TReturn = any, TParent = any> {
-    evaluate: Expression<TSource, TReturn, TParent>;
-    policy?: DOMPolicy | undefined;
-    isVolatile: boolean;
-    /**
-     * Options associated with the binding.
-     */
-    options?: any;
-    /**
-     * 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: Expression<TSource, TReturn, TParent>, policy?: DOMPolicy | undefined, isVolatile?: boolean);
-    /**
-     * Creates an observer capable of notifying a subscriber when the output of a binding changes.
-     * @param directive - The HTML Directive to create the observer for.
-     * @param subscriber - The subscriber to changes in the binding.
-     */
-    abstract createObserver(directive: HTMLDirective, subscriber: Subscriber): ExpressionObserver<TSource, TReturn, TParent>;
-}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
  */
 export declare abstract class StatelessAttachedAttributeDirective<TOptions> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
     protected options: TOptions;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     /**
      * Creates an instance of RefDirective.
      * @param options - The options to use in configuring the directive.

package/dist/dts/templating/render.d.ts

@@ -1,10 +1,11 @@
 import type { FASTElement } from "../components/fast-element.js";
 import type { DOMPolicy } from "../dom.js";
 import { Constructable } from "../interfaces.js";
+import { Binding, BindingDirective } from "../binding/binding.js";
 import type { Subscriber } from "../observation/notifier.js";
 import type { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
-import { ContentTemplate, ContentView } from "./binding.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { ContentTemplate, ContentView } from "./html-binding-directive.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import { CaptureType, SyntheticViewTemplate, TemplateValue, ViewTemplate } from "./template.js";
 /**
  * A Behavior that enables advanced rendering.
@@ -42,13 +43,13 @@ export declare class RenderBehavior<TSource = any> implements ViewBehavior, Subs
  * A Directive that enables use of the RenderBehavior.
  * @public
  */
-export declare class RenderDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
+export declare class RenderDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
     readonly dataBinding: Binding<TSource>;
     readonly templateBinding: Binding<TSource, ContentTemplate>;
     readonly templateBindingDependsOnData: boolean;
     /**
      * The structural id of the DOM node to which the created behavior will apply.
-     */
+     */ BindingDirective: any;
     targetNodeId: string;
     /**
      * Creates an instance of RenderDirective.
@@ -143,6 +144,19 @@ export declare type BaseElementRenderOptions<TSource = any, TParent = any> = Com
      */
     policy?: DOMPolicy;
 };
+/**
+ * Render options for directly creating an element with {@link RenderInstruction.createElementTemplate}
+ * @public
+ */
+export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
+    /**
+     * Directives to use when creating the element template. These directives are applied directly to the specified tag.
+     *
+     * @remarks
+     * Directives supported by this API are: `ref`, `children`, `slotted`, or any custom `HTMLDirective` that can be used on a HTML tag.
+     */
+    directives?: TemplateValue<TSource, TParent>[];
+};
 /**
  * Render options used to specify an element.
  * @public
@@ -163,7 +177,7 @@ export declare type TagNameRenderOptions<TSource = any, TParent = any> = BaseEle
      */
     tagName: string;
 };
-declare function createElementTemplate<TSource = any, TParent = any>(tagName: string, attributes?: Record<string, string | TemplateValue<TSource, TParent>>, content?: string | ContentTemplate, policy?: DOMPolicy): ViewTemplate<TSource, TParent>;
+declare function createElementTemplate<TSource = any, TParent = any>(tagName: string, options?: ElementCreateOptions): ViewTemplate<TSource, TParent>;
 declare function create(options: TagNameRenderOptions): RenderInstruction;
 declare function create(options: ElementConstructorRenderOptions): RenderInstruction;
 declare function create(options: TemplateRenderOptions): RenderInstruction;

package/dist/dts/templating/repeat.d.ts

@@ -1,7 +1,8 @@
 import type { Subscriber } from "../observation/notifier.js";
 import { Expression, ExpressionObserver } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { Binding, BindingDirective } from "../binding/binding.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
 import { SyntheticView } from "./view.js";
 /**
@@ -68,7 +69,7 @@ export declare class RepeatBehavior<TSource = any> implements ViewBehavior, Subs
  * A directive that configures list rendering.
  * @public
  */
-export declare class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
+export declare class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
     readonly dataBinding: Binding<TSource>;
     readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
     readonly options: RepeatOptions;

package/dist/dts/templating/template.d.ts

@@ -1,6 +1,7 @@
 import type { DOMPolicy } from "../dom.js";
+import { Binding } from "../binding/binding.js";
 import type { Expression } from "../observation/observable.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -129,11 +130,6 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * host that the template is being attached to.
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     /**
      * Creates a template based on a set of static strings and dynamic values.
      * @param strings - The static strings to create the template with.

package/dist/dts/templating/view.d.ts

@@ -1,4 +1,4 @@
-import { Disposable } from "../interfaces.js";
+import type { Disposable } from "../interfaces.js";
 import { ExecutionContext, SourceLifetime } from "../observation/observable.js";
 import type { CompiledViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
 /**
@@ -14,6 +14,10 @@ export interface View<TSource = any, TParent = any> extends Disposable {
      * The data that the view is bound to.
      */
     readonly source: TSource | null;
+    /**
+     * Indicates whether the controller is bound.
+     */
+    readonly isBound: boolean;
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
@@ -29,6 +33,17 @@ export interface View<TSource = any, TParent = any> extends Disposable {
  * @public
  */
 export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent> {
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    readonly sourceLifetime?: SourceLifetime;
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior: {
+        unbind(controller: ViewController<TSource, TParent>): any;
+    }): void;
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -185,11 +200,6 @@ export declare class HTMLView<TSource = any, TParent = any> implements ElementVi
      * Unbinds a view's behaviors from its binding source.
      */
     unbind(): void;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     private evaluateUnbindables;
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.

package/dist/dts/testing/fakes.d.ts

@@ -1,4 +1,5 @@
-import { ExecutionContext, ViewBehavior, ViewBehaviorTargets } from "../index.js";
+import { ExecutionContext } from "../observation/observable.js";
+import type { ViewBehavior, ViewBehaviorTargets } from "../templating/html-directive.js";
 export declare const Fake: Readonly<{
     executionContext<TParent = any>(parent?: TParent | undefined, parentContext?: ExecutionContext<TParent> | undefined): ExecutionContext<TParent>;
     viewController<TSource = any, TParent_1 = any>(targets?: ViewBehaviorTargets, ...behaviors: ViewBehavior<TSource, TParent_1>[]): {

package/dist/dts/utilities.d.ts

@@ -14,7 +14,7 @@ export declare function composedParent<T extends HTMLElement>(element: T): HTMLE
  * Determines if the reference element contains the test element in a "composed" DOM tree that
  * ignores shadow DOM boundaries.
  *
- * Returns true of the test element is a descendent of the reference, or exist in
+ * Returns true of the test element is a descendent of the reference, or exists in
  * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
  * @param reference - The element to test for containment against.
  * @param test - The element being tested for containment.
@@ -23,13 +23,14 @@ export declare function composedParent<T extends HTMLElement>(element: T): HTMLE
  */
 export declare function composedContains(reference: HTMLElement, test: HTMLElement): boolean;
 /**
+ * An extension of MutationObserver that supports unobserving nodes.
  * @internal
  */
 export declare class UnobservableMutationObserver extends MutationObserver {
     private readonly callback;
     private observedNodes;
     /**
-     * An extension of MutationObserver that supports unobserving nodes.
+     * Creates an instance of UnobservableMutationObserver.
      * @param callback - The callback to invoke when observed nodes are changed.
      */
     constructor(callback: MutationCallback);

package/dist/esm/binding/binding.js

@@ -0,0 +1,18 @@
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+export 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;
+    }
+}

package/dist/esm/binding/normalize.js

@@ -0,0 +1,17 @@
+import { isFunction } from "../interfaces.js";
+import { Binding } from "./binding.js";
+import { oneWay } from "./one-way.js";
+import { oneTime } from "./one-time.js";
+/**
+ * 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
+ */
+export function normalizeBinding(value) {
+    return isFunction(value)
+        ? oneWay(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}

package/dist/esm/binding/one-time.js

@@ -0,0 +1,21 @@
+import { makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
+}
+makeSerializationNoop(OneTimeBinding);
+/**
+ * Creates a one time binding
+ * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
+ * @returns A binding configuration.
+ * @public
+ */
+export function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
+}

package/dist/esm/binding/one-way.js

@@ -0,0 +1,30 @@
+import { Observable } from "../observation/observable.js";
+import { Binding } from "./binding.js";
+class OneWayBinding extends Binding {
+    createObserver(subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+/**
+ * Creates an standard binding.
+ * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+export function oneWay(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OneWayBinding(expression, policy, isVolatile);
+}
+/**
+ * Creates an event listener binding.
+ * @param expression - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+export function listener(expression, options) {
+    const config = new OneWayBinding(expression);
+    config.options = options;
+    return config;
+}

package/dist/esm/{templating/binding-signal.js → binding/signal.js}

@@ -1,5 +1,6 @@
-import { isString, noop } from "../interfaces.js";
-import { Binding } from "./html-directive.js";
+import { isString } from "../interfaces.js";
+import { makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
 const subscribers = Object.create(null);
 export const Signal = Object.freeze({
     subscribe(signal, subscriber) {
@@ -41,11 +42,6 @@ class SignalObserver {
         this.dataBinding = dataBinding;
         this.subscriber = subscriber;
         this.isNotBound = true;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
     }
     bind(controller) {
         if (this.isNotBound) {
@@ -69,8 +65,9 @@ class SignalObserver {
             : options(controller.source, controller.context);
     }
 }
+makeSerializationNoop(SignalObserver);
 class SignalBinding extends Binding {
-    createObserver(directive, subscriber) {
+    createObserver(subscriber) {
         return new SignalObserver(this, subscriber);
     }
 }

package/dist/esm/{templating/binding-two-way.js → binding/two-way.js}

@@ -1,7 +1,7 @@
-import { isString, noop } from "../interfaces.js";
+import { isString } from "../interfaces.js";
 import { Observable, } from "../observation/observable.js";
-import { FAST } from "../platform.js";
-import { Binding } from "./html-directive.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
 const defaultOptions = {
     fromView: v => v,
 };
@@ -25,11 +25,6 @@ class TwoWayObserver {
         this.subscriber = subscriber;
         this.dataBinding = dataBinding;
         this.isNotBound = true;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
     }
     bind(controller) {
@@ -53,7 +48,7 @@ class TwoWayObserver {
         this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
     handleEvent(event) {
-        const directive = this.directive;
+        const bindingSource = this.directive;
         const target = event.currentTarget;
         const notifier = this.notifier;
         const last = notifier.last; // using internal API!!!
@@ -62,26 +57,27 @@ class TwoWayObserver {
             return;
         }
         let value;
-        switch (directive.aspectType) {
+        switch (bindingSource.aspectType) {
             case 1:
-                value = target.getAttribute(directive.targetAspect);
+                value = target.getAttribute(bindingSource.targetAspect);
                 break;
             case 2:
-                value = target.hasAttribute(directive.targetAspect);
+                value = target.hasAttribute(bindingSource.targetAspect);
                 break;
             case 4:
                 value = target.innerText;
                 break;
             default:
-                value = target[directive.targetAspect];
+                value = target[bindingSource.targetAspect];
                 break;
         }
         last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
     }
 }
+makeSerializationNoop(TwoWayObserver);
 class TwoWayBinding extends Binding {
-    createObserver(directive, subscriber) {
-        return new TwoWayObserver(directive, subscriber, this);
+    createObserver(subscriber, bindingSource) {
+        return new TwoWayObserver(bindingSource, subscriber, this);
     }
 }
 /**

package/dist/esm/components/element-controller.js

@@ -1,7 +1,7 @@
-import { noop } from "../interfaces.js";
+import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { Observable, SourceLifetime } from "../observation/observable.js";
-import { FAST } from "../platform.js";
+import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
 const defaultEventOptions = {
@@ -58,11 +58,6 @@ export class ElementController extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
@@ -103,6 +98,27 @@ export class ElementController extends PropertyChangeNotifier {
         Observable.track(this, isConnectedPropertyName);
         return this.stage === 1 /* Stages.connected */;
     }
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+    }
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime() {
+        var _a;
+        return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
+    }
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -165,6 +181,14 @@ export class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior) {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+    }
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -397,6 +421,7 @@ export class ElementController extends PropertyChangeNotifier {
         elementControllerStrategy = strategy;
     }
 }
+makeSerializationNoop(ElementController);
 // Set default strategy for ElementController
 ElementController.setStrategy(ElementController);
 /**
@@ -478,7 +503,6 @@ export class StyleElementStrategy {
     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]);
         }