@microsoft/fast-element 2.8.0 → 2.8.1

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Mon, 13 Oct 2025 00:36:35 GMT",
+      "date": "Tue, 21 Oct 2025 16:17:03 GMT",
+      "version": "2.8.1",
+      "tag": "@microsoft/fast-element_v2.8.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "d66ae6571c97341890e5320048fc1a3ef38dc5be",
+            "comment": "feat: add methods to track hydrating instances"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Oct 2025 00:37:08 GMT",
       "version": "2.8.0",
       "tag": "@microsoft/fast-element_v2.8.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @microsoft/fast-element
 
-<!-- This log was last generated on Mon, 13 Oct 2025 00:36:35 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 21 Oct 2025 16:17:03 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.8.1
+
+Tue, 21 Oct 2025 16:17:03 GMT
+
+### Patches
+
+- feat: add methods to track hydrating instances (863023+radium-v@users.noreply.github.com)
+
 ## 2.8.0
 
-Mon, 13 Oct 2025 00:36:35 GMT
+Mon, 13 Oct 2025 00:37:08 GMT
 
 ### Minor changes
 

package/dist/dts/components/element-controller.d.ts

@@ -241,18 +241,44 @@ export declare class HydratableElementController<TElement extends HTMLElement =
     /**
      * Lifecycle callbacks for hydration events
      */
-    private static lifecycleCallbacks?;
+    static lifecycleCallbacks?: HydrationControllerCallbacks;
+    /**
+     * An idle callback ID used to track hydration completion
+     */
+    private static idleCallbackId;
+    /**
+     * Adds the current element instance to the hydrating instances map
+     */
+    private addHydratingInstance;
     /**
      * Configure lifecycle callbacks for hydration events
      */
     static config(callbacks: HydrationControllerCallbacks): typeof HydratableElementController;
     private static hydrationObserverHandler;
     /**
-     * Checks if all elements have completed hydration and dispatches event if complete
+     * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
+     * Then resets the ElementController strategy to the default so that future elements
+     * don't use the HydratableElementController.
+     *
+     * @param deadline - the idle deadline object
      */
     private static checkHydrationComplete;
     static forCustomElement(element: HTMLElement, override?: boolean): ElementController<HTMLElement>;
     connect(): void;
+    /**
+     * A map of element instances by the name of the custom element they are
+     * associated with. The key is the custom element name, and the value is the
+     * instances of hydratable elements which currently need to be hydrated.
+     *
+     * When all of the instances in the set have been hydrated, the set is
+     * cleared and removed from the map. If the map is empty, the
+     * hydrationComplete callback is invoked.
+     */
+    private static hydratingInstances?;
+    /**
+     * Removes the current element instance from the hydrating instances map
+     */
+    private removeHydratingInstance;
     disconnect(): void;
     static install(): void;
 }

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

@@ -591,6 +591,21 @@ export const needsHydrationAttribute = "needs-hydration";
  * @beta
  */
 export class HydratableElementController extends ElementController {
+    /**
+     * Adds the current element instance to the hydrating instances map
+     */
+    addHydratingInstance() {
+        if (!HydratableElementController.hydratingInstances) {
+            return;
+        }
+        const name = this.definition.name;
+        let instances = HydratableElementController.hydratingInstances.get(name);
+        if (!instances) {
+            instances = new Set();
+            HydratableElementController.hydratingInstances.set(name, instances);
+        }
+        instances.add(this.source);
+    }
     /**
      * Configure lifecycle callbacks for hydration events
      */
@@ -600,17 +615,30 @@ export class HydratableElementController extends ElementController {
     }
     static hydrationObserverHandler(records) {
         for (const record of records) {
-            HydratableElementController.hydrationObserver.unobserve(record.target);
-            record.target.$fastController.connect();
+            if (!record.target.hasAttribute(deferHydrationAttribute)) {
+                HydratableElementController.hydrationObserver.unobserve(record.target);
+                record.target.$fastController.connect();
+            }
         }
     }
     /**
-     * Checks if all elements have completed hydration and dispatches event if complete
+     * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
+     * Then resets the ElementController strategy to the default so that future elements
+     * don't use the HydratableElementController.
+     *
+     * @param deadline - the idle deadline object
      */
-    static checkHydrationComplete() {
-        var _a, _b;
-        if (!document.querySelector(`[${needsHydrationAttribute}]`)) {
-            (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.hydrationComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    static checkHydrationComplete(deadline) {
+        var _a, _b, _c;
+        if (deadline.didTimeout) {
+            HydratableElementController.idleCallbackId = requestIdleCallback(HydratableElementController.checkHydrationComplete, { timeout: 50 });
+            return;
+        }
+        // If there are no more hydrating instances, invoke the hydrationComplete callback
+        if (((_a = HydratableElementController.hydratingInstances) === null || _a === void 0 ? void 0 : _a.size) === 0) {
+            (_c = (_b = HydratableElementController.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.hydrationComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
+            // Reset to the default strategy after hydration is complete
+            ElementController.setStrategy(ElementController);
         }
     }
     static forCustomElement(element, override) {
@@ -623,15 +651,17 @@ export class HydratableElementController extends ElementController {
         return super.forCustomElement(element, override);
     }
     connect() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         // Initialize needsHydration on first connect
-        if (this.needsHydration === undefined) {
-            this.needsHydration =
-                this.source.getAttribute(needsHydrationAttribute) !== null;
+        this.needsHydration =
+            (_a = this.needsHydration) !== null && _a !== void 0 ? _a : this.source.getAttribute(needsHydrationAttribute) !== null;
+        if (this.needsHydration) {
+            (_c = (_b = HydratableElementController.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.elementWillHydrate) === null || _c === void 0 ? void 0 : _c.call(_b, this.definition.name);
         }
         // If the `defer-hydration` attribute exists on the source,
         // wait for it to be removed before continuing connection behavior.
         if (this.source.hasAttribute(deferHydrationAttribute)) {
+            this.addHydratingInstance();
             HydratableElementController.hydrationObserver.observe(this.source, {
                 attributeFilter: [deferHydrationAttribute],
             });
@@ -643,20 +673,19 @@ export class HydratableElementController extends ElementController {
         // class
         if (!this.needsHydration) {
             super.connect();
+            this.removeHydratingInstance();
             return;
         }
         if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
-        // Callback: Before hydration has started
-        (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementWillHydrate) === null || _b === void 0 ? void 0 : _b.call(_a, this.definition.name);
         this.stage = 0 /* Stages.connecting */;
         this.bindObservables();
         this.connectBehaviors();
-        const element = this.source;
-        const host = (_c = getShadowRoot(element)) !== null && _c !== void 0 ? _c : element;
         if (this.template) {
             if (isHydratable(this.template)) {
+                const element = this.source;
+                const host = (_d = getShadowRoot(element)) !== null && _d !== void 0 ? _d : element;
                 let firstChild = host.firstChild;
                 let lastChild = host.lastChild;
                 if (element.shadowRoot === null) {
@@ -671,7 +700,7 @@ export class HydratableElementController extends ElementController {
                     }
                 }
                 this.view = this.template.hydrate(firstChild, lastChild, element);
-                (_d = this.view) === null || _d === void 0 ? void 0 : _d.bind(this.source);
+                (_e = this.view) === null || _e === void 0 ? void 0 : _e.bind(this.source);
             }
             else {
                 this.renderTemplate(this.template);
@@ -681,11 +710,31 @@ export class HydratableElementController extends ElementController {
         this.stage = 1 /* Stages.connected */;
         this.source.removeAttribute(needsHydrationAttribute);
         this.needsInitialization = this.needsHydration = false;
+        this.removeHydratingInstance();
         Observable.notify(this, isConnectedPropertyName);
+    }
+    /**
+     * Removes the current element instance from the hydrating instances map
+     */
+    removeHydratingInstance() {
+        var _a, _b;
+        if (!HydratableElementController.hydratingInstances) {
+            return;
+        }
+        const name = this.definition.name;
+        const instances = HydratableElementController.hydratingInstances.get(name);
         // Callback: After hydration has finished
-        (_f = (_e = HydratableElementController.lifecycleCallbacks) === null || _e === void 0 ? void 0 : _e.elementDidHydrate) === null || _f === void 0 ? void 0 : _f.call(_e, this.definition.name);
-        // Check if hydration is complete after this element is hydrated
-        HydratableElementController.checkHydrationComplete();
+        (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementDidHydrate) === null || _b === void 0 ? void 0 : _b.call(_a, this.definition.name);
+        if (instances) {
+            instances.delete(this.source);
+            if (!instances.size) {
+                HydratableElementController.hydratingInstances.delete(name);
+            }
+            if (HydratableElementController.idleCallbackId) {
+                cancelIdleCallback(HydratableElementController.idleCallbackId);
+            }
+            HydratableElementController.idleCallbackId = requestIdleCallback(HydratableElementController.checkHydrationComplete, { timeout: 50 });
+        }
     }
     disconnect() {
         super.disconnect();
@@ -696,3 +745,17 @@ export class HydratableElementController extends ElementController {
     }
 }
 HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);
+/**
+ * An idle callback ID used to track hydration completion
+ */
+HydratableElementController.idleCallbackId = null;
+/**
+ * A map of element instances by the name of the custom element they are
+ * associated with. The key is the custom element name, and the value is the
+ * instances of hydratable elements which currently need to be hydrated.
+ *
+ * When all of the instances in the set have been hydrated, the set is
+ * cleared and removed from the map. If the map is empty, the
+ * hydrationComplete callback is invoked.
+ */
+HydratableElementController.hydratingInstances = new Map();

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { isFunction } from "../interfaces.js";
 import { ElementController } from "./element-controller.js";
 import { FASTElementDefinition, } from "./fast-definitions.js";
@@ -41,11 +32,21 @@ function compose(type, nameOrDef) {
     return FASTElementDefinition.compose(this, type);
 }
 function defineAsync(type, nameOrDef) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (isFunction(type)) {
-            return (yield FASTElementDefinition.composeAsync(type, nameOrDef)).define().type;
-        }
-        return (yield FASTElementDefinition.composeAsync(this, type)).define().type;
+    if (isFunction(type)) {
+        return new Promise(resolve => {
+            FASTElementDefinition.composeAsync(type, nameOrDef).then(value => {
+                resolve(value);
+            });
+        }).then(value => {
+            return value.define().type;
+        });
+    }
+    return new Promise(resolve => {
+        FASTElementDefinition.composeAsync(this, type).then(value => {
+            resolve(value);
+        });
+    }).then(value => {
+        return value.define().type;
     });
 }
 function define(type, nameOrDef) {

package/dist/esm/polyfills.js

@@ -25,3 +25,36 @@
         result.globalThis = result;
     }
 })();
+(function requestIdleCallbackPolyfill() {
+    if ("requestIdleCallback" in globalThis) {
+        return;
+    }
+    /**
+     * A polyfill for requestIdleCallback that falls back to setTimeout.
+     *
+     * @param callback - The function to call when the browser is idle.
+     * @param options - Options object that may contain a timeout property.
+     * @returns An ID that can be used to cancel the callback.
+     * @public
+     */
+    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
+        const start = Date.now();
+        return setTimeout(() => {
+            callback({
+                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
+                    ? Date.now() - start >= options.timeout
+                    : false,
+                timeRemaining: () => 0,
+            });
+        }, 1);
+    };
+    /**
+     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
+     *
+     * @param id - The ID of the callback to cancel.
+     * @public
+     */
+    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
+        clearTimeout(id);
+    };
+})();

package/dist/fast-element.api.json

@@ -12593,6 +12593,37 @@
               "isAbstract": false,
               "name": "install"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@microsoft/fast-element!HydratableElementController.lifecycleCallbacks:member",
+              "docComment": "/**\n * Lifecycle callbacks for hydration events\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "static lifecycleCallbacks?: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "HydrationControllerCallbacks",
+                  "canonicalReference": "@microsoft/fast-element!HydrationControllerCallbacks:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Beta",
+              "name": "lifecycleCallbacks",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": true,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@microsoft/fast-element!HydratableElementController#needsHydration:member",

package/dist/fast-element.debug.js

@@ -152,6 +152,39 @@ const noop = () => void 0;
         result.globalThis = result;
     }
 })();
+(function requestIdleCallbackPolyfill() {
+    if ("requestIdleCallback" in globalThis) {
+        return;
+    }
+    /**
+     * A polyfill for requestIdleCallback that falls back to setTimeout.
+     *
+     * @param callback - The function to call when the browser is idle.
+     * @param options - Options object that may contain a timeout property.
+     * @returns An ID that can be used to cancel the callback.
+     * @public
+     */
+    globalThis.requestIdleCallback = function requestIdleCallback(callback, options) {
+        const start = Date.now();
+        return setTimeout(() => {
+            callback({
+                didTimeout: (options === null || options === void 0 ? void 0 : options.timeout)
+                    ? Date.now() - start >= options.timeout
+                    : false,
+                timeRemaining: () => 0,
+            });
+        }, 1);
+    };
+    /**
+     * A polyfill for cancelIdleCallback that falls back to clearTimeout.
+     *
+     * @param id - The ID of the callback to cancel.
+     * @public
+     */
+    globalThis.cancelIdleCallback = function cancelIdleCallback(id) {
+        clearTimeout(id);
+    };
+})();
 
 // ensure FAST global - duplicated debug.ts
 const propConfig = {
@@ -6023,6 +6056,21 @@ const needsHydrationAttribute = "needs-hydration";
  * @beta
  */
 class HydratableElementController extends ElementController {
+    /**
+     * Adds the current element instance to the hydrating instances map
+     */
+    addHydratingInstance() {
+        if (!HydratableElementController.hydratingInstances) {
+            return;
+        }
+        const name = this.definition.name;
+        let instances = HydratableElementController.hydratingInstances.get(name);
+        if (!instances) {
+            instances = new Set();
+            HydratableElementController.hydratingInstances.set(name, instances);
+        }
+        instances.add(this.source);
+    }
     /**
      * Configure lifecycle callbacks for hydration events
      */
@@ -6032,17 +6080,30 @@ class HydratableElementController extends ElementController {
     }
     static hydrationObserverHandler(records) {
         for (const record of records) {
-            HydratableElementController.hydrationObserver.unobserve(record.target);
-            record.target.$fastController.connect();
+            if (!record.target.hasAttribute(deferHydrationAttribute)) {
+                HydratableElementController.hydrationObserver.unobserve(record.target);
+                record.target.$fastController.connect();
+            }
         }
     }
     /**
-     * Checks if all elements have completed hydration and dispatches event if complete
+     * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
+     * Then resets the ElementController strategy to the default so that future elements
+     * don't use the HydratableElementController.
+     *
+     * @param deadline - the idle deadline object
      */
-    static checkHydrationComplete() {
-        var _a, _b;
-        if (!document.querySelector(`[${needsHydrationAttribute}]`)) {
-            (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.hydrationComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+    static checkHydrationComplete(deadline) {
+        var _a, _b, _c;
+        if (deadline.didTimeout) {
+            HydratableElementController.idleCallbackId = requestIdleCallback(HydratableElementController.checkHydrationComplete, { timeout: 50 });
+            return;
+        }
+        // If there are no more hydrating instances, invoke the hydrationComplete callback
+        if (((_a = HydratableElementController.hydratingInstances) === null || _a === void 0 ? void 0 : _a.size) === 0) {
+            (_c = (_b = HydratableElementController.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.hydrationComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
+            // Reset to the default strategy after hydration is complete
+            ElementController.setStrategy(ElementController);
         }
     }
     static forCustomElement(element, override) {
@@ -6055,15 +6116,17 @@ class HydratableElementController extends ElementController {
         return super.forCustomElement(element, override);
     }
     connect() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         // Initialize needsHydration on first connect
-        if (this.needsHydration === undefined) {
-            this.needsHydration =
-                this.source.getAttribute(needsHydrationAttribute) !== null;
+        this.needsHydration =
+            (_a = this.needsHydration) !== null && _a !== void 0 ? _a : this.source.getAttribute(needsHydrationAttribute) !== null;
+        if (this.needsHydration) {
+            (_c = (_b = HydratableElementController.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.elementWillHydrate) === null || _c === void 0 ? void 0 : _c.call(_b, this.definition.name);
         }
         // If the `defer-hydration` attribute exists on the source,
         // wait for it to be removed before continuing connection behavior.
         if (this.source.hasAttribute(deferHydrationAttribute)) {
+            this.addHydratingInstance();
             HydratableElementController.hydrationObserver.observe(this.source, {
                 attributeFilter: [deferHydrationAttribute],
             });
@@ -6075,20 +6138,19 @@ class HydratableElementController extends ElementController {
         // class
         if (!this.needsHydration) {
             super.connect();
+            this.removeHydratingInstance();
             return;
         }
         if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
-        // Callback: Before hydration has started
-        (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementWillHydrate) === null || _b === void 0 ? void 0 : _b.call(_a, this.definition.name);
         this.stage = 0 /* Stages.connecting */;
         this.bindObservables();
         this.connectBehaviors();
-        const element = this.source;
-        const host = (_c = getShadowRoot(element)) !== null && _c !== void 0 ? _c : element;
         if (this.template) {
             if (isHydratable(this.template)) {
+                const element = this.source;
+                const host = (_d = getShadowRoot(element)) !== null && _d !== void 0 ? _d : element;
                 let firstChild = host.firstChild;
                 let lastChild = host.lastChild;
                 if (element.shadowRoot === null) {
@@ -6103,7 +6165,7 @@ class HydratableElementController extends ElementController {
                     }
                 }
                 this.view = this.template.hydrate(firstChild, lastChild, element);
-                (_d = this.view) === null || _d === void 0 ? void 0 : _d.bind(this.source);
+                (_e = this.view) === null || _e === void 0 ? void 0 : _e.bind(this.source);
             }
             else {
                 this.renderTemplate(this.template);
@@ -6113,11 +6175,31 @@ class HydratableElementController extends ElementController {
         this.stage = 1 /* Stages.connected */;
         this.source.removeAttribute(needsHydrationAttribute);
         this.needsInitialization = this.needsHydration = false;
+        this.removeHydratingInstance();
         Observable.notify(this, isConnectedPropertyName);
+    }
+    /**
+     * Removes the current element instance from the hydrating instances map
+     */
+    removeHydratingInstance() {
+        var _a, _b;
+        if (!HydratableElementController.hydratingInstances) {
+            return;
+        }
+        const name = this.definition.name;
+        const instances = HydratableElementController.hydratingInstances.get(name);
         // Callback: After hydration has finished
-        (_f = (_e = HydratableElementController.lifecycleCallbacks) === null || _e === void 0 ? void 0 : _e.elementDidHydrate) === null || _f === void 0 ? void 0 : _f.call(_e, this.definition.name);
-        // Check if hydration is complete after this element is hydrated
-        HydratableElementController.checkHydrationComplete();
+        (_b = (_a = HydratableElementController.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementDidHydrate) === null || _b === void 0 ? void 0 : _b.call(_a, this.definition.name);
+        if (instances) {
+            instances.delete(this.source);
+            if (!instances.size) {
+                HydratableElementController.hydratingInstances.delete(name);
+            }
+            if (HydratableElementController.idleCallbackId) {
+                cancelIdleCallback(HydratableElementController.idleCallbackId);
+            }
+            HydratableElementController.idleCallbackId = requestIdleCallback(HydratableElementController.checkHydrationComplete, { timeout: 50 });
+        }
     }
     disconnect() {
         super.disconnect();
@@ -6128,6 +6210,20 @@ class HydratableElementController extends ElementController {
     }
 }
 HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);
+/**
+ * An idle callback ID used to track hydration completion
+ */
+HydratableElementController.idleCallbackId = null;
+/**
+ * A map of element instances by the name of the custom element they are
+ * associated with. The key is the custom element name, and the value is the
+ * instances of hydratable elements which currently need to be hydrated.
+ *
+ * When all of the instances in the set have been hydrated, the set is
+ * cleared and removed from the map. If the map is empty, the
+ * hydrationComplete callback is invoked.
+ */
+HydratableElementController.hydratingInstances = new Map();
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
@@ -6160,11 +6256,21 @@ function compose(type, nameOrDef) {
     return FASTElementDefinition.compose(this, type);
 }
 function defineAsync(type, nameOrDef) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (isFunction(type)) {
-            return (yield FASTElementDefinition.composeAsync(type, nameOrDef)).define().type;
-        }
-        return (yield FASTElementDefinition.composeAsync(this, type)).define().type;
+    if (isFunction(type)) {
+        return new Promise(resolve => {
+            FASTElementDefinition.composeAsync(type, nameOrDef).then(value => {
+                resolve(value);
+            });
+        }).then(value => {
+            return value.define().type;
+        });
+    }
+    return new Promise(resolve => {
+        FASTElementDefinition.composeAsync(this, type).then(value => {
+            resolve(value);
+        });
+    }).then(value => {
+        return value.define().type;
     });
 }
 function define(type, nameOrDef) {