@fluentui/web-components 3.0.0-beta.57 → 3.0.0-beta.59

package/dist/web-components.js

@@ -1174,6 +1174,109 @@ css.partial = (strings, ...values) => {
   return new CSSPartial(styles, behaviors);
 };
 
+const bindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const bindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const repeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
+const repeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
+const elementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
+const elementBoundaryEndMarker = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
+function isComment$1(node) {
+  return node && node.nodeType === Node.COMMENT_NODE;
+}
+/**
+ * Markup utilities to aid in template hydration.
+ * @internal
+ */
+const HydrationMarkup = Object.freeze({
+  attributeMarkerName: "data-fe-b",
+  attributeBindingSeparator: " ",
+  contentBindingStartMarker(index, uniqueId) {
+    return `fe-b$$start$$${index}$$${uniqueId}$$fe-b`;
+  },
+  contentBindingEndMarker(index, uniqueId) {
+    return `fe-b$$end$$${index}$$${uniqueId}$$fe-b`;
+  },
+  repeatStartMarker(index) {
+    return `fe-repeat$$start$$${index}$$fe-repeat`;
+  },
+  repeatEndMarker(index) {
+    return `fe-repeat$$end$$${index}$$fe-repeat`;
+  },
+  isContentBindingStartMarker(content) {
+    return bindingStartMarker.test(content);
+  },
+  isContentBindingEndMarker(content) {
+    return bindingEndMarker.test(content);
+  },
+  isRepeatViewStartMarker(content) {
+    return repeatViewStartMarker.test(content);
+  },
+  isRepeatViewEndMarker(content) {
+    return repeatViewEndMarker.test(content);
+  },
+  isElementBoundaryStartMarker(node) {
+    return isComment$1(node) && elementBoundaryStartMarker.test(node.data.trim());
+  },
+  isElementBoundaryEndMarker(node) {
+    return isComment$1(node) && elementBoundaryEndMarker.test(node.data);
+  },
+  /**
+   * Returns the indexes of the ViewBehaviorFactories affecting
+   * attributes for the element, or null if no factories were found.
+   */
+  parseAttributeBinding(node) {
+    const attr = node.getAttribute(this.attributeMarkerName);
+    return attr === null ? attr : attr.split(this.attributeBindingSeparator).map(i => parseInt(i));
+  },
+  /**
+   * Parses the ViewBehaviorFactory index from string data. Returns
+   * the binding index or null if the index cannot be retrieved.
+   */
+  parseContentBindingStartMarker(content) {
+    return parseIndexAndIdMarker(bindingStartMarker, content);
+  },
+  parseContentBindingEndMarker(content) {
+    return parseIndexAndIdMarker(bindingEndMarker, content);
+  },
+  /**
+   * Parses the index of a repeat directive from a content string.
+   */
+  parseRepeatStartMarker(content) {
+    return parseIntMarker(repeatViewStartMarker, content);
+  },
+  parseRepeatEndMarker(content) {
+    return parseIntMarker(repeatViewEndMarker, content);
+  },
+  /**
+   * Parses element Id from element boundary markers
+   */
+  parseElementBoundaryStartMarker(content) {
+    return parseStringMarker(elementBoundaryStartMarker, content.trim());
+  },
+  parseElementBoundaryEndMarker(content) {
+    return parseStringMarker(elementBoundaryEndMarker, content);
+  }
+});
+function parseIntMarker(regex, content) {
+  const match = regex.exec(content);
+  return match === null ? match : parseInt(match[1]);
+}
+function parseStringMarker(regex, content) {
+  const match = regex.exec(content);
+  return match === null ? match : match[1];
+}
+function parseIndexAndIdMarker(regex, content) {
+  const match = regex.exec(content);
+  return match === null ? match : [parseInt(match[1]), match[2]];
+}
+/**
+ * @internal
+ */
+const Hydratable = Symbol.for("fe-hydration");
+function isHydratable(value) {
+  return value[Hydratable] === Hydratable;
+}
+
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 const interpolationStart = `${marker}{`;
 const interpolationEnd = `}${marker}`;
@@ -1340,250 +1443,209 @@ class StatelessAttachedAttributeDirective {
 }
 makeSerializationNoop(StatelessAttachedAttributeDirective);
 
-function updateContent(target, aspect, value, controller) {
-  // If there's no actual value, then this equates to the
-  // empty string for the purposes of content bindings.
-  if (value === null || value === undefined) {
-    value = "";
+class HydrationTargetElementError extends Error {
+  constructor(
+  /**
+   * The error message
+   */
+  message,
+  /**
+   * The Compiled View Behavior Factories that belong to the view.
+   */
+  factories,
+  /**
+   * The node to target factory.
+   */
+  node) {
+    super(message);
+    this.factories = factories;
+    this.node = node;
   }
-  // If the value has a "create" method, then it's a ContentTemplate.
-  if (value.create) {
-    target.textContent = "";
-    let view = target.$fastView;
-    // If there's no previous view that we might be able to
-    // reuse then create a new view from the template.
-    if (view === void 0) {
-      view = value.create();
-    } else {
-      // If there is a previous view, but it wasn't created
-      // from the same template as the new value, then we
-      // need to remove the old view if it's still in the DOM
-      // and create a new view from the template.
-      if (target.$fastTemplate !== value) {
-        if (view.isComposed) {
-          view.remove();
-          view.unbind();
-        }
-        view = value.create();
-      }
-    }
-    // It's possible that the value is the same as the previous template
-    // and that there's actually no need to compose it.
-    if (!view.isComposed) {
-      view.isComposed = true;
-      view.bind(controller.source, controller.context);
-      view.insertBefore(target);
-      target.$fastView = view;
-      target.$fastTemplate = value;
-    } else if (view.needsBindOnly) {
-      view.needsBindOnly = false;
-      view.bind(controller.source, controller.context);
+}
+function isComment(node) {
+  return node.nodeType === Node.COMMENT_NODE;
+}
+function isText(node) {
+  return node.nodeType === Node.TEXT_NODE;
+}
+/**
+ * Returns a range object inclusive of all nodes including and between the
+ * provided first and last node.
+ * @param first - The first node
+ * @param last - This last node
+ * @returns
+ */
+function createRangeForNodes(first, last) {
+  const range = document.createRange();
+  range.setStart(first, 0);
+  // The lastIndex should be inclusive of the end of the lastChild. Obtain offset based
+  // on usageNotes:  https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd#usage_notes
+  range.setEnd(last, isComment(last) || isText(last) ? last.data.length : last.childNodes.length);
+  return range;
+}
+function isShadowRoot(node) {
+  return node instanceof DocumentFragment && "mode" in node;
+}
+/**
+ * Maps {@link CompiledViewBehaviorFactory} ids to the corresponding node targets for the view.
+ * @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.
+ * @returns - A {@link ViewBehaviorTargets } object for the factories in the view.
+ */
+function buildViewBindingTargets(firstNode, lastNode, factories) {
+  const range = createRangeForNodes(firstNode, lastNode);
+  const treeRoot = range.commonAncestorContainer;
+  const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      return range.comparePoint(node, 0) === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     }
-  } else {
-    const view = target.$fastView;
-    // If there is a view and it's currently composed into
-    // the DOM, then we need to remove it.
-    if (view !== void 0 && view.isComposed) {
-      view.isComposed = false;
-      view.remove();
-      if (view.needsBindOnly) {
-        view.needsBindOnly = false;
-      } else {
-        view.unbind();
-      }
+  });
+  const targets = {};
+  const boundaries = {};
+  let node = walker.currentNode = firstNode;
+  while (node !== null) {
+    switch (node.nodeType) {
+      case Node.ELEMENT_NODE:
+        {
+          targetElement(node, factories, targets);
+          break;
+        }
+      case Node.COMMENT_NODE:
+        {
+          targetComment(node, walker, factories, targets, boundaries);
+          break;
+        }
     }
-    target.textContent = value;
+    node = walker.nextNode();
   }
-}
-function updateTokenList(target, aspect, value) {
-  var _a;
-  const lookup = `${this.id}-t`;
-  const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : target[lookup] = {
-    v: 0,
-    cv: Object.create(null)
+  range.detach();
+  return {
+    targets,
+    boundaries
   };
-  const classVersions = state.cv;
-  let version = state.v;
-  const tokenList = target[aspect];
-  // Add the classes, tracking the version at which they were added.
-  if (value !== null && value !== undefined && value.length) {
-    const names = value.split(/\s+/);
-    for (let i = 0, ii = names.length; i < ii; ++i) {
-      const currentName = names[i];
-      if (currentName === "") {
-        continue;
+}
+function targetElement(node, factories, targets) {
+  // Check for attributes and map any factories.
+  const attrFactoryIds = HydrationMarkup.parseAttributeBinding(node);
+  if (attrFactoryIds !== null) {
+    for (const id of attrFactoryIds) {
+      if (!factories[id]) {
+        throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
       }
-      classVersions[currentName] = version;
-      tokenList.add(currentName);
+      targetFactory(factories[id], node, targets);
     }
+    node.removeAttribute(HydrationMarkup.attributeMarkerName);
   }
-  state.v = version + 1;
-  // If this is the first call to add classes, there's no need to remove old ones.
-  if (version === 0) {
+}
+function targetComment(node, walker, factories, targets, boundaries) {
+  if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
+    skipToElementBoundaryEndMarker(node, walker);
     return;
   }
-  // Remove classes from the previous version.
-  version -= 1;
-  for (const name in classVersions) {
-    if (classVersions[name] === version) {
-      tokenList.remove(name);
+  if (HydrationMarkup.isContentBindingStartMarker(node.data)) {
+    const parsed = HydrationMarkup.parseContentBindingStartMarker(node.data);
+    if (parsed === null) {
+      return;
     }
-  }
-}
-const sinkLookup = {
-  [DOMAspect.attribute]: DOM.setAttribute,
-  [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
-  [DOMAspect.property]: (t, a, v) => t[a] = v,
-  [DOMAspect.content]: updateContent,
-  [DOMAspect.tokenList]: updateTokenList,
-  [DOMAspect.event]: () => void 0
-};
-/**
- * A directive that applies bindings.
- * @public
- */
-class HTMLBindingDirective {
-  /**
-   * Creates an instance of HTMLBindingDirective.
-   * @param dataBinding - The binding configuration to apply.
-   */
-  constructor(dataBinding) {
-    this.dataBinding = dataBinding;
-    this.updateTarget = null;
-    /**
-     * The type of aspect to target.
-     */
-    this.aspectType = DOMAspect.content;
-  }
-  /**
-   * Creates HTML to be used within a template.
-   * @param add - Can be used to add  behavior factories to a template.
-   */
-  createHTML(add) {
-    return Markup.interpolation(add(this));
-  }
-  /**
-   * Creates a behavior.
-   */
-  createBehavior() {
-    var _a;
-    if (this.updateTarget === null) {
-      const sink = sinkLookup[this.aspectType];
-      const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
-      if (!sink) {
-        throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+    const [index, id] = parsed;
+    const factory = factories[index];
+    const nodes = [];
+    let current = walker.nextSibling();
+    node.data = "";
+    const first = current;
+    // Search for the binding end marker that closes the binding.
+    while (current !== null) {
+      if (isComment(current)) {
+        const parsed = HydrationMarkup.parseContentBindingEndMarker(current.data);
+        if (parsed && parsed[1] === id) {
+          break;
+        }
       }
-      this.data = `${this.id}-d`;
-      this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
+      nodes.push(current);
+      current = walker.nextSibling();
     }
-    return this;
-  }
-  /** @internal */
-  bind(controller) {
-    var _a;
-    const target = controller.targets[this.targetNodeId];
-    switch (this.aspectType) {
-      case DOMAspect.event:
-        target[this.data] = controller;
-        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
-        break;
-      case DOMAspect.content:
-        controller.onUnbind(this);
-      // intentional fall through
-      default:
-        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : target[this.data] = this.dataBinding.createObserver(this, this);
-        observer.target = target;
-        observer.controller = controller;
-        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
-        break;
+    if (current === null) {
+      const root = node.getRootNode();
+      throw new Error(`Error hydrating Comment node inside "${isShadowRoot(root) ? root.host.nodeName : root.nodeName}".`);
     }
-  }
-  /** @internal */
-  unbind(controller) {
-    const target = controller.targets[this.targetNodeId];
-    const view = target.$fastView;
-    if (view !== void 0 && view.isComposed) {
-      view.unbind();
-      view.needsBindOnly = true;
+    current.data = "";
+    if (nodes.length === 1 && isText(nodes[0])) {
+      targetFactory(factory, nodes[0], targets);
+    } else {
+      // If current === first, it means there is no content in
+      // the view. This happens when a `when` directive evaluates false,
+      // or whenever a content binding returns null or undefined.
+      // In that case, there will never be any content
+      // to hydrate and Binding can simply create a HTMLView
+      // whenever it needs to.
+      if (current !== first && current.previousSibling !== null) {
+        boundaries[factory.targetNodeId] = {
+          first,
+          last: current.previousSibling
+        };
+      }
+      // Binding evaluates to null / undefined or a template.
+      // If binding revaluates to string, it will replace content in target
+      // So we always insert a text node to ensure that
+      // text content binding will be written to this text node instead of comment
+      const dummyTextNode = current.parentNode.insertBefore(document.createTextNode(""), current);
+      targetFactory(factory, dummyTextNode, targets);
     }
   }
-  /** @internal */
-  handleEvent(event) {
-    const controller = event.currentTarget[this.data];
-    if (controller.isBound) {
-      ExecutionContext.setEvent(event);
-      const result = this.dataBinding.evaluate(controller.source, controller.context);
-      ExecutionContext.setEvent(null);
-      if (result !== true) {
-        event.preventDefault();
+}
+/**
+ * Moves TreeWalker to element boundary end marker
+ * @param node - element boundary start marker node
+ * @param walker - tree walker
+ */
+function skipToElementBoundaryEndMarker(node, walker) {
+  const id = HydrationMarkup.parseElementBoundaryStartMarker(node.data);
+  let current = walker.nextSibling();
+  while (current !== null) {
+    if (isComment(current)) {
+      const parsed = HydrationMarkup.parseElementBoundaryEndMarker(current.data);
+      if (parsed && parsed === id) {
+        break;
       }
     }
+    current = walker.nextSibling();
   }
-  /** @internal */
-  handleChange(binding, observer) {
-    const target = observer.target;
-    const controller = observer.controller;
-    this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+}
+function targetFactory(factory, node, targets) {
+  if (factory.targetNodeId === undefined) {
+    // Dev error, this shouldn't ever be thrown
+    throw new Error("Factory could not be target to the node");
   }
+  targets[factory.targetNodeId] = node;
 }
-HTMLDirective.define(HTMLBindingDirective, {
-  aspected: true
-});
 
+var _a;
 function removeNodeSequence(firstNode, lastNode) {
   const parent = firstNode.parentNode;
   let current = firstNode;
   let next;
   while (current !== lastNode) {
     next = current.nextSibling;
+    if (!next) {
+      throw new Error(`Unmatched first/last child inside "${lastNode.getRootNode().host.nodeName}".`);
+    }
     parent.removeChild(current);
     current = next;
   }
   parent.removeChild(lastNode);
 }
-/**
- * The standard View implementation, which also implements ElementView and SyntheticView.
- * @public
- */
-class HTMLView {
-  /**
-   * Constructs an instance of HTMLView.
-   * @param fragment - The html fragment that contains the nodes for this view.
-   * @param behaviors - The behaviors to be applied to this view.
-   */
-  constructor(fragment, factories, targets) {
-    this.fragment = fragment;
-    this.factories = factories;
-    this.targets = targets;
-    this.behaviors = null;
-    this.unbindables = [];
-    /**
-     * The data that the view is bound to.
-     */
-    this.source = null;
-    /**
-     * Indicates whether the controller is bound.
-     */
-    this.isBound = false;
-    /**
-     * Indicates how the source's lifetime relates to the controller's lifetime.
-     */
-    this.sourceLifetime = SourceLifetime.unknown;
-    /**
-     * The execution context the view is running within.
-     */
-    this.context = this;
-    /**
-     * The index of the current item within a repeat context.
-     */
-    this.index = 0;
-    /**
-     * The length of the current collection within a repeat context.
-     */
-    this.length = 0;
-    this.firstChild = fragment.firstChild;
-    this.lastChild = fragment.lastChild;
-  }
+class DefaultExecutionContext {
+  constructor() {
+    /**
+     * 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;
+  }
   /**
    * The current event within an event handler.
    */
@@ -1637,6 +1699,43 @@ class HTMLView {
   eventTarget() {
     return this.event.target;
   }
+}
+/**
+ * The standard View implementation, which also implements ElementView and SyntheticView.
+ * @public
+ */
+class HTMLView extends DefaultExecutionContext {
+  /**
+   * Constructs an instance of HTMLView.
+   * @param fragment - The html fragment that contains the nodes for this view.
+   * @param behaviors - The behaviors to be applied to this view.
+   */
+  constructor(fragment, factories, targets) {
+    super();
+    this.fragment = fragment;
+    this.factories = factories;
+    this.targets = targets;
+    this.behaviors = null;
+    this.unbindables = [];
+    /**
+     * The data that the view is bound to.
+     */
+    this.source = null;
+    /**
+     * Indicates whether the controller is bound.
+     */
+    this.isBound = false;
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    this.sourceLifetime = SourceLifetime.unknown;
+    /**
+     * The execution context the view is running within.
+     */
+    this.context = this;
+    this.firstChild = fragment.firstChild;
+    this.lastChild = fragment.lastChild;
+  }
   /**
    * Appends the view's DOM nodes to the referenced node.
    * @param node - The parent node to append the view's DOM nodes to.
@@ -1666,101 +1765,510 @@ class HTMLView {
     }
   }
   /**
-   * Removes the view's DOM nodes.
-   * The nodes are not disposed and the view can later be re-inserted.
+   * Removes the view's DOM nodes.
+   * The nodes are not disposed and the view can later be re-inserted.
+   */
+  remove() {
+    const fragment = this.fragment;
+    const end = this.lastChild;
+    let current = this.firstChild;
+    let next;
+    while (current !== end) {
+      next = current.nextSibling;
+      fragment.appendChild(current);
+      current = next;
+    }
+    fragment.appendChild(end);
+  }
+  /**
+   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+   * Once a view has been disposed, it cannot be inserted or bound again.
+   */
+  dispose() {
+    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 = this) {
+    if (this.source === source) {
+      return;
+    }
+    let behaviors = this.behaviors;
+    if (behaviors === null) {
+      this.source = source;
+      this.context = context;
+      this.behaviors = behaviors = new Array(this.factories.length);
+      const factories = this.factories;
+      for (let i = 0, ii = factories.length; i < ii; ++i) {
+        const behavior = factories[i].createBehavior();
+        behavior.bind(this);
+        behaviors[i] = behavior;
+      }
+    } else {
+      if (this.source !== null) {
+        this.evaluateUnbindables();
+      }
+      this.isBound = false;
+      this.source = source;
+      this.context = context;
+      for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+        behaviors[i].bind(this);
+      }
+    }
+    this.isBound = true;
+  }
+  /**
+   * Unbinds a view's behaviors from its binding source.
+   */
+  unbind() {
+    if (!this.isBound || this.source === null) {
+      return;
+    }
+    this.evaluateUnbindables();
+    this.source = null;
+    this.context = this;
+    this.isBound = false;
+  }
+  evaluateUnbindables() {
+    const unbindables = this.unbindables;
+    for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+      unbindables[i].unbind(this);
+    }
+    unbindables.length = 0;
+  }
+  /**
+   * Efficiently disposes of a contiguous range of synthetic view instances.
+   * @param views - A contiguous range of views to be disposed.
+   */
+  static disposeContiguousBatch(views) {
+    if (views.length === 0) {
+      return;
+    }
+    removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
+    for (let i = 0, ii = views.length; i < ii; ++i) {
+      views[i].unbind();
+    }
+  }
+}
+makeSerializationNoop(HTMLView);
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
+const HydrationStage = {
+  unhydrated: "unhydrated",
+  hydrating: "hydrating",
+  hydrated: "hydrated"
+};
+/** @public */
+class HydrationBindingError extends Error {
+  constructor(
+  /**
+   * The error message
+   */
+  message,
+  /**
+   * The factory that was unable to be bound
+   */
+  factory,
+  /**
+   * A DocumentFragment containing a clone of the
+   * view's Nodes.
+   */
+  fragment,
+  /**
+   * String representation of the HTML in the template that
+   * threw the binding error.
+   */
+  templateString) {
+    super(message);
+    this.factory = factory;
+    this.fragment = fragment;
+    this.templateString = templateString;
+  }
+}
+class HydrationView extends DefaultExecutionContext {
+  constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
+    super();
+    this.firstChild = firstChild;
+    this.lastChild = lastChild;
+    this.sourceTemplate = sourceTemplate;
+    this.hostBindingTarget = hostBindingTarget;
+    this[_a] = Hydratable;
+    this.context = this;
+    this.source = null;
+    this.isBound = false;
+    this.sourceLifetime = SourceLifetime.unknown;
+    this.unbindables = [];
+    this.fragment = null;
+    this.behaviors = null;
+    this._hydrationStage = HydrationStage.unhydrated;
+    this._bindingViewBoundaries = {};
+    this._targets = {};
+    this.factories = sourceTemplate.compile().factories;
+  }
+  get hydrationStage() {
+    return this._hydrationStage;
+  }
+  get targets() {
+    return this._targets;
+  }
+  get bindingViewBoundaries() {
+    return this._bindingViewBoundaries;
+  }
+  /**
+   * no-op. Hydrated views are don't need to be moved from a documentFragment
+   * to the target node.
+   */
+  insertBefore(node) {
+    // No-op in cases where this is called before the view is removed,
+    // because the nodes will already be in the document and just need hydrating.
+    if (this.fragment === null) {
+      return;
+    }
+    if (this.fragment.hasChildNodes()) {
+      node.parentNode.insertBefore(this.fragment, node);
+    } else {
+      const end = this.lastChild;
+      if (node.previousSibling === end) return;
+      const parentNode = node.parentNode;
+      let current = this.firstChild;
+      let next;
+      while (current !== end) {
+        next = current.nextSibling;
+        parentNode.insertBefore(current, node);
+        current = next;
+      }
+      parentNode.insertBefore(end, node);
+    }
+  }
+  /**
+   * Appends the view to a node. In cases where this is called before the
+   * view has been removed, the method will no-op.
+   * @param node - the node to append the view to.
+   */
+  appendTo(node) {
+    if (this.fragment !== null) {
+      node.appendChild(this.fragment);
+    }
+  }
+  remove() {
+    const fragment = this.fragment || (this.fragment = document.createDocumentFragment());
+    const end = this.lastChild;
+    let current = this.firstChild;
+    let next;
+    while (current !== end) {
+      next = current.nextSibling;
+      if (!next) {
+        throw new Error(`Unmatched first/last child inside "${end.getRootNode().host.nodeName}".`);
+      }
+      fragment.appendChild(current);
+      current = next;
+    }
+    fragment.appendChild(end);
+  }
+  bind(source, context = this) {
+    var _b, _c;
+    if (this.hydrationStage !== HydrationStage.hydrated) {
+      this._hydrationStage = HydrationStage.hydrating;
+    }
+    if (this.source === source) {
+      return;
+    }
+    let behaviors = this.behaviors;
+    if (behaviors === null) {
+      this.source = source;
+      this.context = context;
+      try {
+        const {
+          targets,
+          boundaries
+        } = buildViewBindingTargets(this.firstChild, this.lastChild, this.factories);
+        this._targets = targets;
+        this._bindingViewBoundaries = boundaries;
+      } catch (error) {
+        if (error instanceof HydrationTargetElementError) {
+          let templateString = this.sourceTemplate.html;
+          if (typeof templateString !== "string") {
+            templateString = templateString.innerHTML;
+          }
+          error.templateString = templateString;
+        }
+        throw error;
+      }
+      this.behaviors = behaviors = new Array(this.factories.length);
+      const factories = this.factories;
+      for (let i = 0, ii = factories.length; i < ii; ++i) {
+        const factory = factories[i];
+        if (factory.targetNodeId === "h" && this.hostBindingTarget) {
+          targetFactory(factory, this.hostBindingTarget, this._targets);
+        }
+        // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
+        if (factory.targetNodeId in this.targets) {
+          const behavior = factory.createBehavior();
+          behavior.bind(this);
+          behaviors[i] = behavior;
+        } else {
+          let templateString = this.sourceTemplate.html;
+          if (typeof templateString !== "string") {
+            templateString = templateString.innerHTML;
+          }
+          throw new HydrationBindingError(`HydrationView was unable to successfully target bindings inside "${(_c = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode()).host) === null || _c === void 0 ? void 0 : _c.nodeName}".`, factory, createRangeForNodes(this.firstChild, this.lastChild).cloneContents(), templateString);
+        }
+      }
+    } else {
+      if (this.source !== null) {
+        this.evaluateUnbindables();
+      }
+      this.isBound = false;
+      this.source = source;
+      this.context = context;
+      for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+        behaviors[i].bind(this);
+      }
+    }
+    this.isBound = true;
+    this._hydrationStage = HydrationStage.hydrated;
+  }
+  unbind() {
+    if (!this.isBound || this.source === null) {
+      return;
+    }
+    this.evaluateUnbindables();
+    this.source = null;
+    this.context = this;
+    this.isBound = false;
+  }
+  /**
+   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+   * Once a view has been disposed, it cannot be inserted or bound again.
+   */
+  dispose() {
+    removeNodeSequence(this.firstChild, this.lastChild);
+    this.unbind();
+  }
+  onUnbind(behavior) {
+    this.unbindables.push(behavior);
+  }
+  evaluateUnbindables() {
+    const unbindables = this.unbindables;
+    for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+      unbindables[i].unbind(this);
+    }
+    unbindables.length = 0;
+  }
+}
+_a = Hydratable;
+makeSerializationNoop(HydrationView);
+
+function isContentTemplate(value) {
+  return value.create !== undefined;
+}
+function updateContent(target, aspect, value, controller) {
+  // If there's no actual value, then this equates to the
+  // empty string for the purposes of content bindings.
+  if (value === null || value === undefined) {
+    value = "";
+  }
+  // If the value has a "create" method, then it's a ContentTemplate.
+  if (isContentTemplate(value)) {
+    target.textContent = "";
+    let view = target.$fastView;
+    // If there's no previous view that we might be able to
+    // reuse then create a new view from the template.
+    if (view === void 0) {
+      if (isHydratable(controller) && isHydratable(value) && controller.bindingViewBoundaries[this.targetNodeId] !== undefined && controller.hydrationStage !== HydrationStage.hydrated) {
+        const viewNodes = controller.bindingViewBoundaries[this.targetNodeId];
+        view = value.hydrate(viewNodes.first, viewNodes.last);
+      } else {
+        view = value.create();
+      }
+    } else {
+      // If there is a previous view, but it wasn't created
+      // from the same template as the new value, then we
+      // need to remove the old view if it's still in the DOM
+      // and create a new view from the template.
+      if (target.$fastTemplate !== value) {
+        if (view.isComposed) {
+          view.remove();
+          view.unbind();
+        }
+        view = value.create();
+      }
+    }
+    // It's possible that the value is the same as the previous template
+    // and that there's actually no need to compose it.
+    if (!view.isComposed) {
+      view.isComposed = true;
+      view.bind(controller.source, controller.context);
+      view.insertBefore(target);
+      target.$fastView = view;
+      target.$fastTemplate = value;
+    } else if (view.needsBindOnly) {
+      view.needsBindOnly = false;
+      view.bind(controller.source, controller.context);
+    }
+  } else {
+    const view = target.$fastView;
+    // If there is a view and it's currently composed into
+    // the DOM, then we need to remove it.
+    if (view !== void 0 && view.isComposed) {
+      view.isComposed = false;
+      view.remove();
+      if (view.needsBindOnly) {
+        view.needsBindOnly = false;
+      } else {
+        view.unbind();
+      }
+    }
+    target.textContent = value;
+  }
+}
+function updateTokenList(target, aspect, value) {
+  var _a;
+  const lookup = `${this.id}-t`;
+  const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : target[lookup] = {
+    v: 0,
+    cv: Object.create(null)
+  };
+  const classVersions = state.cv;
+  let version = state.v;
+  const tokenList = target[aspect];
+  // Add the classes, tracking the version at which they were added.
+  if (value !== null && value !== undefined && value.length) {
+    const names = value.split(/\s+/);
+    for (let i = 0, ii = names.length; i < ii; ++i) {
+      const currentName = names[i];
+      if (currentName === "") {
+        continue;
+      }
+      classVersions[currentName] = version;
+      tokenList.add(currentName);
+    }
+  }
+  state.v = version + 1;
+  // If this is the first call to add classes, there's no need to remove old ones.
+  if (version === 0) {
+    return;
+  }
+  // Remove classes from the previous version.
+  version -= 1;
+  for (const name in classVersions) {
+    if (classVersions[name] === version) {
+      tokenList.remove(name);
+    }
+  }
+}
+const sinkLookup = {
+  [DOMAspect.attribute]: DOM.setAttribute,
+  [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+  [DOMAspect.property]: (t, a, v) => t[a] = v,
+  [DOMAspect.content]: updateContent,
+  [DOMAspect.tokenList]: updateTokenList,
+  [DOMAspect.event]: () => void 0
+};
+/**
+ * A directive that applies bindings.
+ * @public
+ */
+class HTMLBindingDirective {
+  /**
+   * Creates an instance of HTMLBindingDirective.
+   * @param dataBinding - The binding configuration to apply.
    */
-  remove() {
-    const fragment = this.fragment;
-    const end = this.lastChild;
-    let current = this.firstChild;
-    let next;
-    while (current !== end) {
-      next = current.nextSibling;
-      fragment.appendChild(current);
-      current = next;
-    }
-    fragment.appendChild(end);
+  constructor(dataBinding) {
+    this.dataBinding = dataBinding;
+    this.updateTarget = null;
+    /**
+     * The type of aspect to target.
+     */
+    this.aspectType = DOMAspect.content;
   }
   /**
-   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-   * Once a view has been disposed, it cannot be inserted or bound again.
+   * Creates HTML to be used within a template.
+   * @param add - Can be used to add  behavior factories to a template.
    */
-  dispose() {
-    removeNodeSequence(this.firstChild, this.lastChild);
-    this.unbind();
-  }
-  onUnbind(behavior) {
-    this.unbindables.push(behavior);
+  createHTML(add) {
+    return Markup.interpolation(add(this));
   }
   /**
-   * 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.
+   * Creates a behavior.
    */
-  bind(source, context = this) {
-    if (this.source === source) {
-      return;
-    }
-    let behaviors = this.behaviors;
-    if (behaviors === null) {
-      this.source = source;
-      this.context = context;
-      this.behaviors = behaviors = new Array(this.factories.length);
-      const factories = this.factories;
-      for (let i = 0, ii = factories.length; i < ii; ++i) {
-        const behavior = factories[i].createBehavior();
-        behavior.bind(this);
-        behaviors[i] = behavior;
-      }
-    } else {
-      if (this.source !== null) {
-        this.evaluateUnbindables();
-      }
-      this.isBound = false;
-      this.source = source;
-      this.context = context;
-      for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-        behaviors[i].bind(this);
+  createBehavior() {
+    var _a;
+    if (this.updateTarget === null) {
+      const sink = sinkLookup[this.aspectType];
+      const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+      if (!sink) {
+        throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
       }
+      this.data = `${this.id}-d`;
+      this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
     }
-    this.isBound = true;
+    return this;
   }
-  /**
-   * Unbinds a view's behaviors from its binding source.
-   */
-  unbind() {
-    if (!this.isBound || this.source === null) {
-      return;
+  /** @internal */
+  bind(controller) {
+    var _a;
+    const target = controller.targets[this.targetNodeId];
+    const isHydrating = isHydratable(controller) && controller.hydrationStage && controller.hydrationStage !== HydrationStage.hydrated;
+    switch (this.aspectType) {
+      case DOMAspect.event:
+        target[this.data] = controller;
+        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+        break;
+      case DOMAspect.content:
+        controller.onUnbind(this);
+      // intentional fall through
+      default:
+        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : target[this.data] = this.dataBinding.createObserver(this, this);
+        observer.target = target;
+        observer.controller = controller;
+        if (isHydrating && (this.aspectType === DOMAspect.attribute || this.aspectType === DOMAspect.booleanAttribute)) {
+          observer.bind(controller);
+          // Skip updating target during bind for attributes
+          break;
+        }
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+        break;
     }
-    this.evaluateUnbindables();
-    this.source = null;
-    this.context = this;
-    this.isBound = false;
   }
-  evaluateUnbindables() {
-    const unbindables = this.unbindables;
-    for (let i = 0, ii = unbindables.length; i < ii; ++i) {
-      unbindables[i].unbind(this);
+  /** @internal */
+  unbind(controller) {
+    const target = controller.targets[this.targetNodeId];
+    const view = target.$fastView;
+    if (view !== void 0 && view.isComposed) {
+      view.unbind();
+      view.needsBindOnly = true;
     }
-    unbindables.length = 0;
   }
-  /**
-   * Efficiently disposes of a contiguous range of synthetic view instances.
-   * @param views - A contiguous range of views to be disposed.
-   */
-  static disposeContiguousBatch(views) {
-    if (views.length === 0) {
-      return;
-    }
-    removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
-    for (let i = 0, ii = views.length; i < ii; ++i) {
-      views[i].unbind();
+  /** @internal */
+  handleEvent(event) {
+    const controller = event.currentTarget[this.data];
+    if (controller.isBound) {
+      ExecutionContext.setEvent(event);
+      const result = this.dataBinding.evaluate(controller.source, controller.context);
+      ExecutionContext.setEvent(null);
+      if (result !== true) {
+        event.preventDefault();
+      }
     }
   }
+  /** @internal */
+  handleChange(binding, observer) {
+    const target = observer.target;
+    const controller = observer.controller;
+    this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+  }
 }
-makeSerializationNoop(HTMLView);
-Observable.defineProperty(HTMLView.prototype, "index");
-Observable.defineProperty(HTMLView.prototype, "length");
+HTMLDirective.define(HTMLBindingDirective, {
+  aspected: true
+});
 
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -2015,7 +2523,6 @@ const Compiler = {
       return parts[0];
     }
     let sourceAspect;
-    let binding;
     let isVolatile = false;
     let bindingPolicy = void 0;
     const partCount = parts.length;
@@ -2024,7 +2531,6 @@ const Compiler = {
         return () => x;
       }
       sourceAspect = x.sourceAspect || sourceAspect;
-      binding = x.dataBinding || binding;
       isVolatile = isVolatile || x.dataBinding.isVolatile;
       bindingPolicy = bindingPolicy || x.dataBinding.policy;
       return x.dataBinding.evaluate;
@@ -2036,17 +2542,14 @@ const Compiler = {
       }
       return output;
     };
-    binding.evaluate = expression;
-    binding.isVolatile = isVolatile;
-    binding.policy = bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy;
-    const directive = new HTMLBindingDirective(binding);
+    const directive = new HTMLBindingDirective(oneWay(expression, bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy, isVolatile));
     HTMLDirective.assignAspect(directive, sourceAspect);
     return directive;
   }
 };
 
 // Much thanks to LitHTML for working this out!
-const lastAttributeNameRegex = /* eslint-disable-next-line no-control-regex */
+const lastAttributeNameRegex = /* eslint-disable-next-line no-control-regex, max-len */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
 const noFactories = Object.create(null);
 /**
@@ -2106,14 +2609,20 @@ class ViewTemplate {
     this.factories = factories;
   }
   /**
-   * Creates an HTMLView instance based on this template definition.
-   * @param hostBindingTarget - The element that host behaviors will be bound to.
+   * @internal
    */
-  create(hostBindingTarget) {
+  compile() {
     if (this.result === null) {
       this.result = Compiler.compile(this.html, this.factories, this.policy);
     }
-    return this.result.createView(hostBindingTarget);
+    return this.result;
+  }
+  /**
+   * Creates an HTMLView instance based on this template definition.
+   * @param hostBindingTarget - The element that host behaviors will be bound to.
+   */
+  create(hostBindingTarget) {
+    return this.compile().createView(hostBindingTarget);
   }
   /**
    * Returns a directive that can inline the template.
@@ -2718,6 +3227,100 @@ FASTElementDefinition.getByType = fastElementRegistry.getByType;
  */
 FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
 
+/**
+ * An extension of MutationObserver that supports unobserving nodes.
+ * @internal
+ */
+class UnobservableMutationObserver extends MutationObserver {
+  /**
+   * Creates an instance of UnobservableMutationObserver.
+   * @param callback - The callback to invoke when observed nodes are changed.
+   */
+  constructor(callback) {
+    function handler(mutations) {
+      this.callback.call(null, mutations.filter(record => this.observedNodes.has(record.target)));
+    }
+    super(handler);
+    this.callback = callback;
+    this.observedNodes = new Set();
+  }
+  observe(target, options) {
+    this.observedNodes.add(target);
+    super.observe(target, options);
+  }
+  unobserve(target) {
+    this.observedNodes.delete(target);
+    if (this.observedNodes.size < 1) {
+      this.disconnect();
+    }
+  }
+}
+/**
+ * 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,
   composed: true,
@@ -2756,6 +3359,11 @@ class ElementController extends PropertyChangeNotifier {
      */
     this.guardBehaviorConnection = false;
     this.behaviors = null;
+    /**
+     * Tracks whether behaviors are connected so that
+     * behaviors cant be connected multiple times
+     */
+    this.behaviorsConnected = false;
     this._mainStyles = null;
     /**
      * This allows Observable.getNotifier(...) to return the Controller
@@ -2996,7 +3604,19 @@ class ElementController extends PropertyChangeNotifier {
       return;
     }
     this.stage = 0 /* Stages.connecting */;
-    // If we have any observables that were bound, re-apply their values.
+    this.bindObservables();
+    this.connectBehaviors();
+    if (this.needsInitialization) {
+      this.renderTemplate(this.template);
+      this.addStyles(this.mainStyles);
+      this.needsInitialization = false;
+    } else if (this.view !== null) {
+      this.view.bind(this.source);
+    }
+    this.stage = 1 /* Stages.connected */;
+    Observable.notify(this, isConnectedPropertyName);
+  }
+  bindObservables() {
     if (this.boundObservables !== null) {
       const element = this.source;
       const boundObservables = this.boundObservables;
@@ -3007,23 +3627,30 @@ class ElementController extends PropertyChangeNotifier {
       }
       this.boundObservables = null;
     }
-    const behaviors = this.behaviors;
-    if (behaviors !== null) {
-      this.guardBehaviorConnection = true;
-      for (const key of behaviors.keys()) {
-        key.connectedCallback && key.connectedCallback(this);
+  }
+  connectBehaviors() {
+    if (this.behaviorsConnected === false) {
+      const behaviors = this.behaviors;
+      if (behaviors !== null) {
+        this.guardBehaviorConnection = true;
+        for (const key of behaviors.keys()) {
+          key.connectedCallback && key.connectedCallback(this);
+        }
+        this.guardBehaviorConnection = false;
       }
-      this.guardBehaviorConnection = false;
+      this.behaviorsConnected = true;
     }
-    if (this.needsInitialization) {
-      this.renderTemplate(this.template);
-      this.addStyles(this.mainStyles);
-      this.needsInitialization = false;
-    } else if (this.view !== null) {
-      this.view.bind(this.source);
+  }
+  disconnectBehaviors() {
+    if (this.behaviorsConnected === true) {
+      const behaviors = this.behaviors;
+      if (behaviors !== null) {
+        for (const key of behaviors.keys()) {
+          key.disconnectedCallback && key.disconnectedCallback(this);
+        }
+      }
+      this.behaviorsConnected = false;
     }
-    this.stage = 1 /* Stages.connected */;
-    Observable.notify(this, isConnectedPropertyName);
   }
   /**
    * Runs disconnected lifecycle behavior on the associated element.
@@ -3037,12 +3664,7 @@ class ElementController extends PropertyChangeNotifier {
     if (this.view !== null) {
       this.view.unbind();
     }
-    const behaviors = this.behaviors;
-    if (behaviors !== null) {
-      for (const key of behaviors.keys()) {
-        key.disconnectedCallback && key.disconnectedCallback(this);
-      }
-    }
+    this.disconnectBehaviors();
     this.stage = 3 /* Stages.disconnected */;
   }
   /**
@@ -3242,6 +3864,87 @@ if (ElementStyles.supportsAdoptedStyleSheets) {
 } else {
   ElementStyles.setDefaultStrategy(StyleElementStrategy);
 }
+const deferHydrationAttribute = "defer-hydration";
+const needsHydrationAttribute = "needs-hydration";
+/**
+ * An ElementController capable of hydrating FAST elements from
+ * Declarative Shadow DOM.
+ *
+ * @beta
+ */
+class HydratableElementController extends ElementController {
+  static hydrationObserverHandler(records) {
+    for (const record of records) {
+      HydratableElementController.hydrationObserver.unobserve(record.target);
+      record.target.$fastController.connect();
+    }
+  }
+  connect() {
+    var _a, _b;
+    // Initialize needsHydration on first connect
+    if (this.needsHydration === undefined) {
+      this.needsHydration = this.source.getAttribute(needsHydrationAttribute) !== null;
+    }
+    // If the `defer-hydration` attribute exists on the source,
+    // wait for it to be removed before continuing connection behavior.
+    if (this.source.hasAttribute(deferHydrationAttribute)) {
+      HydratableElementController.hydrationObserver.observe(this.source, {
+        attributeFilter: [deferHydrationAttribute]
+      });
+      return;
+    }
+    // If the controller does not need to be hydrated, defer connection behavior
+    // to the base-class. This case handles element re-connection and initial connection
+    // of elements that did not get declarative shadow-dom emitted, as well as if an extending
+    // class
+    if (!this.needsHydration) {
+      super.connect();
+      return;
+    }
+    if (this.stage !== 3 /* Stages.disconnected */) {
+      return;
+    }
+    this.stage = 0 /* Stages.connecting */;
+    this.bindObservables();
+    this.connectBehaviors();
+    const element = this.source;
+    const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
+    if (this.template) {
+      if (isHydratable(this.template)) {
+        let firstChild = host.firstChild;
+        let lastChild = host.lastChild;
+        if (element.shadowRoot === null) {
+          // handle element boundary markers when shadowRoot is not present
+          if (HydrationMarkup.isElementBoundaryStartMarker(firstChild)) {
+            firstChild.data = "";
+            firstChild = firstChild.nextSibling;
+          }
+          if (HydrationMarkup.isElementBoundaryEndMarker(lastChild)) {
+            lastChild.data = "";
+            lastChild = lastChild.previousSibling;
+          }
+        }
+        this.view = this.template.hydrate(firstChild, lastChild, element);
+        (_b = this.view) === null || _b === void 0 ? void 0 : _b.bind(this.source);
+      } else {
+        this.renderTemplate(this.template);
+      }
+    }
+    this.addStyles(this.mainStyles);
+    this.stage = 1 /* Stages.connected */;
+    this.source.removeAttribute(needsHydrationAttribute);
+    this.needsInitialization = this.needsHydration = false;
+    Observable.notify(this, isConnectedPropertyName);
+  }
+  disconnect() {
+    super.disconnect();
+    HydratableElementController.hydrationObserver.unobserve(this.source);
+  }
+  static install() {
+    ElementController.setStrategy(HydratableElementController);
+  }
+}
+HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {