@microsoft/fast-element 2.10.1 → 2.10.3

package/dist/fast-element.js

@@ -2296,6 +2296,12 @@ css.partial = (strings, ...values) => {
     return new CSSPartial(styles, behaviors);
 };
 
+/**
+ * A unique per-session random marker string used to create placeholder tokens in HTML.
+ * Bindings embedded in template literals are replaced with interpolation markers
+ * of the form `fast-xxxxxx{id}fast-xxxxxx` so the compiler can later locate them in the
+ * parsed DOM and associate each marker with its ViewBehaviorFactory.
+ */
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
 const interpolationEnd = `}${marker}`;
@@ -2347,6 +2353,8 @@ const Parser = Object.freeze({
      * directives or null if no directives are found in the string.
      */
     parse(value, factories) {
+        // Split on the interpolation start marker. If there's only one part,
+        // no placeholders exist and we return null to signal "no directives here."
         const parts = value.split(interpolationStart);
         if (parts.length === 1) {
             return null;
@@ -2400,7 +2408,13 @@ const HTMLDirective = Object.freeze({
         return type;
     },
     /**
-     *
+     * Determines the DOM aspect type for a directive based on attribute name prefix.
+     * The prefix convention maps to aspect types as follows:
+     *   - No prefix (e.g. "class")  → DOMAspect.attribute
+     *   - ":" prefix (e.g. ":value") → DOMAspect.property (":classList" → DOMAspect.tokenList)
+     *   - "?" prefix (e.g. "?disabled") → DOMAspect.booleanAttribute
+     *   - `@` prefix (e.g. `@click`) → DOMAspect.event
+     *   - Falsy or absent value → DOMAspect.content (see remarks)
      * @param directive - The directive to assign the aspect to.
      * @param value - The value to base the aspect determination on.
      * @remarks
@@ -2625,6 +2639,23 @@ function children(propertyOrOptions) {
     return new ChildrenDirective(propertyOrOptions);
 }
 
+/**
+ * Regex patterns for parsing hydration markers embedded as HTML comments by the SSR renderer.
+ * Each marker type encodes factory indices so the client can map markers back to ViewBehaviorFactories.
+ *
+ * Content binding markers bracket text/template content:
+ *   <!-- fe-b$$start$$<factoryIndex>$$<uniqueId>$$fe-b -->
+ *   ...content...
+ *   <!-- fe-b$$end$$<factoryIndex>$$<uniqueId>$$fe-b -->
+ *
+ * Repeat markers bracket each repeated item:
+ *   <!-- fe-repeat$$start$$<itemIndex>$$fe-repeat -->
+ *   <!-- fe-repeat$$end$$<itemIndex>$$fe-repeat -->
+ *
+ * Element boundary markers demarcate nested custom elements so parent walkers can skip them:
+ *   <!-- fe-eb$$start$$<elementId>$$fe-eb -->
+ *   <!-- fe-eb$$end$$<elementId>$$fe-eb -->
+ */
 const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
 const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
 const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
@@ -2842,7 +2873,23 @@ function isShadowRoot(node) {
     return node instanceof DocumentFragment && "mode" in node;
 }
 /**
- * Maps {@link CompiledViewBehaviorFactory} ids to the corresponding node targets for the view.
+ * Maps compiled ViewBehaviorFactory IDs to their corresponding DOM nodes in the
+ * server-rendered shadow root. Uses a TreeWalker to scan the existing DOM between
+ * firstNode and lastNode, parsing hydration markers to build the targets map.
+ *
+ * For element nodes: parses `data-fe-b` (or variant) attributes to identify which
+ * factories target each element, then removes the marker attribute.
+ *
+ * For comment nodes: parses content binding markers (`fe-b$$start/end$$`) to find
+ * the DOM range controlled by each content binding. Single text nodes become the
+ * direct target; multi-node ranges are stored in boundaries for structural directives.
+ * Element boundary markers (`fe-eb$$start/end$$`) cause the walker to skip over
+ * nested custom elements that handle their own hydration.
+ *
+ * Host bindings (targetNodeId='h') appear at the start of the factories array but
+ * have no SSR markers — getHydrationIndexOffset() computes how many to skip so that
+ * marker indices align with the correct non-host factories.
+ *
  * @param firstNode - The first node of the view.
  * @param lastNode -  The last node of the view.
  * @param factories - The Compiled View Behavior Factories that belong to the view.
@@ -2968,6 +3015,11 @@ function skipToElementBoundaryEndMarker(node, walker) {
         current = walker.nextSibling();
     }
 }
+/**
+ * Counts how many factories at the start of the array are host bindings (targetNodeId='h').
+ * Host bindings target the custom element itself and are not represented by SSR markers,
+ * so the marker indices must be offset by this count to align with the correct factory.
+ */
 function getHydrationIndexOffset(factories) {
     let offset = 0;
     for (let i = 0, ii = factories.length; i < ii; ++i) {
@@ -3163,6 +3215,17 @@ class HTMLView extends DefaultExecutionContext {
     }
     /**
      * Binds a view's behaviors to its binding source.
+     *
+     * On the first call, this iterates through all compiled factories, calling
+     * createBehavior() on each to produce a ViewBehavior instance (e.g., an
+     * HTMLBindingDirective), and then immediately binds it. This is where event
+     * listeners are registered, expression observers are created, and initial
+     * DOM values are set.
+     *
+     * On subsequent calls with a new source, existing behaviors are re-bound
+     * to the new data source, which re-evaluates all binding expressions and
+     * updates the DOM accordingly.
+     *
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
@@ -3172,6 +3235,8 @@ class HTMLView extends DefaultExecutionContext {
         }
         let behaviors = this.behaviors;
         if (behaviors === null) {
+            // First bind: create behaviors from factories and bind each one.
+            // The view (this) acts as the ViewController, providing targets and source.
             this.source = source;
             this.context = context;
             this.behaviors = behaviors = new Array(this.factories.length);
@@ -3463,6 +3528,14 @@ makeSerializationNoop(HydrationView);
 function isContentTemplate(value) {
     return value.create !== undefined;
 }
+/**
+ * Sink function for DOMAspect.content bindings (text content interpolation).
+ * Handles two cases:
+ * - If the value is a ContentTemplate (has a create() method), it composes a child
+ *   view into the DOM, managing view lifecycle (create/reuse/remove/bind).
+ * - If the value is a primitive, it sets target.textContent directly, first removing
+ *   any previously composed view.
+ */
 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.
@@ -3531,6 +3604,12 @@ function updateContent(target, aspect, value, controller) {
         target.textContent = value;
     }
 }
+/**
+ * Sink function for DOMAspect.tokenList bindings (e.g., :classList).
+ * Uses a versioning scheme to efficiently track which CSS classes were added
+ * in the current update vs. the previous one. Classes from the previous version
+ * that aren't present in the new value are automatically removed.
+ */
 function updateTokenList(target, aspect, value) {
     var _a;
     const lookup = `${this.id}-t`;
@@ -3563,6 +3642,12 @@ function updateTokenList(target, aspect, value) {
         }
     }
 }
+/**
+ * Maps each DOMAspect type to its corresponding DOM update ("sink") function.
+ * When a binding value changes, the sink function for the binding's aspect type
+ * is called to push the new value into the DOM. Events are handled separately
+ * via addEventListener in bind(), so the event sink is a no-op.
+ */
 const sinkLookup = {
     [DOMAspect.attribute]: DOM.setAttribute,
     [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
@@ -3572,7 +3657,18 @@ const sinkLookup = {
     [DOMAspect.event]: () => void 0,
 };
 /**
- * A directive that applies bindings.
+ * The central binding directive that bridges data expressions and DOM updates.
+ *
+ * HTMLBindingDirective fulfills three roles simultaneously:
+ * - **HTMLDirective**: Produces placeholder HTML via createHTML() during template authoring.
+ * - **ViewBehaviorFactory**: Creates behaviors (returns itself) during view creation.
+ * - **ViewBehavior / EventListener**: Attaches to a DOM node during bind, manages
+ *   expression observers for reactive updates, and handles DOM events directly.
+ *
+ * The aspectType (set by HTMLDirective.assignAspect during template processing)
+ * determines which DOM "sink" function is used to apply values — e.g.,
+ * setAttribute for attributes, addEventListener for events, textContent for content.
+ *
  * @public
  */
 class HTMLBindingDirective {
@@ -3611,7 +3707,18 @@ class HTMLBindingDirective {
         }
         return this;
     }
-    /** @internal */
+    /**
+     * Attaches this binding to its target DOM node.
+     * - For events: stores the controller reference on the target element and registers
+     *   this directive as the EventListener via addEventListener. The directive's
+     *   handleEvent() method will be called when the event fires.
+     * - For content bindings: registers an unbind handler, then falls through to the
+     *   default path.
+     * - For all non-event bindings: creates (or reuses) an ExpressionObserver, evaluates
+     *   the binding expression, and applies the result to the DOM via the updateTarget
+     *   sink function. The observer will call handleChange() on future data changes.
+     * @internal
+     */
     bind(controller) {
         var _a;
         const target = controller.targets[this.targetNodeId];
@@ -3650,7 +3757,14 @@ class HTMLBindingDirective {
             view.needsBindOnly = true;
         }
     }
-    /** @internal */
+    /**
+     * Implements the EventListener interface. When a DOM event fires on the target
+     * element, this method retrieves the ViewController stored on the element,
+     * sets the event on the ExecutionContext so `c.event` is available to the
+     * binding expression, and evaluates the expression. If the expression returns
+     * anything other than `true`, the event's default action is prevented.
+     * @internal
+     */
     handleEvent(event) {
         const controller = event.currentTarget[this.data];
         if (controller.isBound) {
@@ -3662,7 +3776,13 @@ class HTMLBindingDirective {
             }
         }
     }
-    /** @internal */
+    /**
+     * Called by the ExpressionObserver when a tracked dependency changes.
+     * Re-evaluates the binding expression via observer.bind() and pushes
+     * the new value to the DOM through the updateTarget sink function.
+     * This is the reactive update path that keeps the DOM in sync with data.
+     * @internal
+     */
     handleChange(binding, observer) {
         const target = observer.target;
         const controller = observer.controller;
@@ -3671,6 +3791,12 @@ class HTMLBindingDirective {
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 
+/**
+ * Builds a hierarchical node ID by appending the child index to the parent's ID.
+ * For example, the third child of root is "r.2", and its first child is "r.2.0".
+ * These IDs are used as property names on the targets prototype so that each
+ * binding's target DOM node can be lazily resolved via a chain of childNodes lookups.
+ */
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
 // used to prevent creating lots of objects just to track node and index while compiling
@@ -3720,6 +3846,13 @@ class CompilationContext {
         this.proto = Object.create(null, this.descriptors);
         return this;
     }
+    /**
+     * Registers a lazy getter on the targets prototype that resolves a DOM node
+     * by navigating from its parent's childNodes at the given index. Getters are
+     * chained: accessing targets["r.0.2"] first resolves targets["r.0"] (which
+     * resolves targets["r"]), then returns childNodes[2]. Results are cached so
+     * each node is resolved at most once per view instance.
+     */
     addTargetDescriptor(parentId, targetId, targetIndex) {
         const descriptors = this.descriptors;
         if (targetId === "r" || // root
@@ -3730,7 +3863,7 @@ class CompilationContext {
         if (!descriptors[parentId]) {
             const index = parentId.lastIndexOf(".");
             const grandparentId = parentId.substring(0, index);
-            const childIndex = parseInt(parentId.substring(index + 1));
+            const childIndex = parseInt(parentId.substring(index + 1), 10);
             this.addTargetDescriptor(grandparentId, parentId, childIndex);
         }
         let descriptor = descriptorCache[targetId];
@@ -3745,13 +3878,20 @@ class CompilationContext {
         }
         descriptors[targetId] = descriptor;
     }
+    /**
+     * Creates a new HTMLView by cloning the compiled DocumentFragment and building
+     * a targets object. The targets prototype contains lazy getters that resolve
+     * each binding's target DOM node via childNodes traversal. Accessing every
+     * registered nodeId eagerly triggers the getter chain so all nodes are resolved
+     * before behaviors are bound.
+     */
     createView(hostBindingTarget) {
         const fragment = this.fragment.cloneNode(true);
         const targets = Object.create(this.proto);
-        targets.r = fragment;
-        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost;
+        targets.r = fragment; // root — the cloned DocumentFragment
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost; // host — the custom element
         for (const id of this.nodeIds) {
-            targets[id]; // trigger locator
+            Reflect.get(targets, id); // trigger lazy getter to resolve and cache the DOM node
         }
         return new HTMLView(fragment, this.factories, targets);
     }
@@ -3771,7 +3911,6 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
             }
         }
         else {
-            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
             result = Compiler.aggregate(parseResult, context.policy);
         }
         if (result !== null) {
@@ -3816,7 +3955,6 @@ function compileChildren(context, parent, parentId) {
     let nodeIndex = 0;
     let childNode = parent.firstChild;
     while (childNode) {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
         const result = compileNode(context, parentId, childNode, nodeIndex);
         childNode = result.node;
         nodeIndex = result.index;
@@ -3831,14 +3969,14 @@ function compileNode(context, parentId, node, nodeIndex) {
             break;
         case 3: // text node
             return compileContent(context, node, parentId, nodeId, nodeIndex);
-        case 8: // comment
+        case 8: {
+            // comment
             const parts = Parser.parse(node.data, context.directives);
             if (parts !== null) {
-                context.addFactory(
-                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
+                context.addFactory(Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
             }
             break;
+        }
     }
     next.index = nodeIndex + 1;
     next.node = node.nextSibling;
@@ -3846,7 +3984,7 @@ function compileNode(context, parentId, node, nodeIndex) {
 }
 function isMarker(node, directives) {
     return (node &&
-        node.nodeType == 8 &&
+        node.nodeType === 8 &&
         Parser.parse(node.data, directives) !== null);
 }
 const templateTag = "TEMPLATE";
@@ -3983,6 +4121,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -4487,7 +4627,25 @@ class ViewTemplate {
         return view;
     }
     /**
-     * Creates a template based on a set of static strings and dynamic values.
+     * Processes the tagged template literal's static strings and interpolated values and
+     * creates a ViewTemplate.
+     *
+     * For each interpolated value:
+     * 1. Functions (binding expressions, e.g., `x => x.name`) → wrapped in a one-way HTMLBindingDirective
+     * 2. Binding instances → wrapped in an HTMLBindingDirective
+     * 3. HTMLDirective instances → used as-is
+     * 4. Static values (strings, numbers) → wrapped in a one-time HTMLBindingDirective
+     *
+     * Each directive's createHTML() is called with an `add` callback that registers
+     * the factory in the factories record under a unique ID and returns that ID.
+     * The directive inserts a placeholder marker (e.g., `fast-abc123{0}fast-abc123`) into
+     * the HTML string so the compiler can later find and associate it with the factory.
+     *
+     * Aspect detection happens here too: the `lastAttributeNameRegex` checks whether
+     * the placeholder appears inside an attribute value, and if so, assignAspect()
+     * sets the correct DOMAspect (attribute, property, event, etc.) based on the
+     * attribute name prefix.
+     *
      * @param strings - The static strings to create the template with.
      * @param values - The dynamic values to create the template with.
      * @param policy - The DOMPolicy to associated with the template.
@@ -4683,13 +4841,7 @@ class RenderDirective {
     }
 }
 HTMLDirective.define(RenderDirective);
-function isElementRenderOptions(object) {
-    return !!object.element || !!object.tagName;
-}
 const typeToInstructionLookup = new Map();
-/* eslint @typescript-eslint/naming-convention: "off"*/
-const defaultAttributes = { ":model": (x) => x };
-const brand = Symbol("RenderInstruction");
 const defaultViewName = "default-view";
 const nullTemplate = html `
     &nbsp;
@@ -4700,87 +4852,6 @@ function instructionToTemplate(def) {
     }
     return def.template;
 }
-function createElementTemplate(tagName, options) {
-    const markup = [];
-    const values = [];
-    const { attributes, directives, content, policy } = options !== null && options !== void 0 ? options : {};
-    markup.push(`<${tagName}`);
-    if (attributes) {
-        const attrNames = Object.getOwnPropertyNames(attributes);
-        for (let i = 0, ii = attrNames.length; i < ii; ++i) {
-            const name = attrNames[i];
-            if (i === 0) {
-                markup[0] = `${markup[0]} ${name}="`;
-            }
-            else {
-                markup.push(`" ${name}="`);
-            }
-            values.push(attributes[name]);
-        }
-        markup.push(`"`);
-    }
-    if (directives) {
-        markup[markup.length - 1] += " ";
-        for (let i = 0, ii = directives.length; i < ii; ++i) {
-            const directive = directives[i];
-            markup.push(i > 0 ? "" : " ");
-            values.push(directive);
-        }
-    }
-    markup[markup.length - 1] += ">";
-    if (content && isFunction(content.create)) {
-        values.push(content);
-        markup.push(`</${tagName}>`);
-    }
-    else {
-        const lastIndex = markup.length - 1;
-        markup[lastIndex] = `${markup[lastIndex]}${content !== null && content !== void 0 ? content : ""}</${tagName}>`;
-    }
-    return ViewTemplate.create(markup, values, policy);
-}
-function create(options) {
-    var _a;
-    const name = (_a = options.name) !== null && _a !== void 0 ? _a : defaultViewName;
-    let template;
-    if (isElementRenderOptions(options)) {
-        let tagName = options.tagName;
-        if (!tagName) {
-            const def = FASTElementDefinition.getByType(options.element);
-            if (def) {
-                tagName = def.name;
-            }
-            else {
-                throw new Error("Invalid element for model rendering.");
-            }
-        }
-        if (!options.attributes) {
-            options.attributes = defaultAttributes;
-        }
-        template = createElementTemplate(tagName, options);
-    }
-    else {
-        template = options.template;
-    }
-    return {
-        brand,
-        type: options.type,
-        name,
-        template,
-    };
-}
-function instanceOf(object) {
-    return object && object.brand === brand;
-}
-function register(optionsOrInstruction) {
-    let lookup = typeToInstructionLookup.get(optionsOrInstruction.type);
-    if (lookup === void 0) {
-        typeToInstructionLookup.set(optionsOrInstruction.type, (lookup = Object.create(null)));
-    }
-    const instruction = instanceOf(optionsOrInstruction)
-        ? optionsOrInstruction
-        : create(optionsOrInstruction);
-    return (lookup[instruction.name] = instruction);
-}
 function getByType(type, name) {
     const entries = typeToInstructionLookup.get(type);
     if (entries === void 0) {
@@ -4794,63 +4865,6 @@ function getForInstance(object, name) {
     }
     return void 0;
 }
-/**
- * Provides APIs for creating and interacting with render instructions.
- * @public
- */
-Object.freeze({
-    /**
-     * Checks whether the provided object is a RenderInstruction.
-     * @param object - The object to check.
-     * @returns true if the object is a RenderInstruction; false otherwise
-     */
-    instanceOf,
-    /**
-     * Creates a RenderInstruction for a set of options.
-     * @param options - The options to use when creating the RenderInstruction.
-     * @remarks
-     * This API should be used with caution. When providing attributes or content,
-     * if not done properly, you can open up the application to XSS attacks. When using this API,
-     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
-     * content and attribute values particularly if they can come from user input.
-     */
-    create,
-    /**
-     * Creates a template based on a tag name.
-     * @param tagName - The tag name to use when creating the template.
-     * @param attributes - The attributes to apply to the element.
-     * @param content - The content to insert into the element.
-     * @param policy - The DOMPolicy to create the template with.
-     * @returns A template based on the provided specifications.
-     * @remarks
-     * This API should be used with caution. When providing attributes or content,
-     * if not done properly, you can open up the application to XSS attacks. When using this API,
-     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
-     * content and attribute values particularly if they can come from user input.
-     */
-    createElementTemplate,
-    /**
-     * Creates and registers an instruction.
-     * @param options The options to use when creating the RenderInstruction.
-     * @remarks
-     * A previously created RenderInstruction can also be registered.
-     */
-    register,
-    /**
-     * Finds a previously registered RenderInstruction by type and optionally by name.
-     * @param type - The type to retrieve the RenderInstruction for.
-     * @param name - An optional name used in differentiating between multiple registered instructions.
-     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
-     */
-    getByType,
-    /**
-     * Finds a previously registered RenderInstruction for the instance's type and optionally by name.
-     * @param object - The instance to retrieve the RenderInstruction for.
-     * @param name - An optional name used in differentiating between multiple registered instructions.
-     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
-     */
-    getForInstance,
-});
 /**
  * @internal
  */
@@ -5441,71 +5455,6 @@ class UnobservableMutationObserver extends MutationObserver {
         }
     }
 }
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-Object.freeze({
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create(source) {
-        const behaviors = [];
-        const targets = {};
-        let unbindables = null;
-        let isConnected = false;
-        return {
-            source,
-            context: ExecutionContext.default,
-            targets,
-            get isBound() {
-                return isConnected;
-            },
-            addBehaviorFactory(factory, target) {
-                var _a, _b, _c, _d;
-                const compiled = factory;
-                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
-                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
-                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
-                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
-                this.addTarget(compiled.targetNodeId, target);
-                this.addBehavior(compiled.createBehavior());
-            },
-            addTarget(nodeId, target) {
-                targets[nodeId] = target;
-            },
-            addBehavior(behavior) {
-                behaviors.push(behavior);
-                if (isConnected) {
-                    behavior.bind(this);
-                }
-            },
-            onUnbind(unbindable) {
-                if (unbindables === null) {
-                    unbindables = [];
-                }
-                unbindables.push(unbindable);
-            },
-            connectedCallback(controller) {
-                if (!isConnected) {
-                    isConnected = true;
-                    behaviors.forEach(x => x.bind(this));
-                }
-            },
-            disconnectedCallback(controller) {
-                if (isConnected) {
-                    isConnected = false;
-                    if (unbindables !== null) {
-                        unbindables.forEach(x => x.unbind(this));
-                    }
-                }
-            },
-        };
-    },
-});
 
 const defaultEventOptions = {
     bubbles: true,
@@ -6228,6 +6177,9 @@ class HydratableElementController extends ElementController {
         // Initialize needsHydration on first connect
         this.needsHydration =
             (_a = this.needsHydration) !== null && _a !== void 0 ? _a : this.source.hasAttribute(needsHydrationAttribute);
+        if (this.needsHydration) {
+            this.addHydratingInstance();
+        }
         // If the `defer-hydration` attribute exists on the source,
         // wait for it to be removed before continuing connection behavior.
         if (this.source.hasAttribute(deferHydrationAttribute)) {