private bindLetElement(parentManifest: IElementSymbol, node: HTMLElement): void {
    const symbol = new LetElementSymbol(this.dom, node);
    parentManifest.childNodes.push(symbol);

    const attributes = node.attributes;
    let i = 0;
    while (i < attributes.length) {
      const attr = attributes[i];
      if (attr.name === 'to-view-model') {
        node.removeAttribute('to-view-model');
        symbol.toViewModel = true;
        continue;
      }
      const attrSyntax = this.attrParser.parse(attr.name, attr.value);
      const command = this.resources.getBindingCommand(attrSyntax);
      const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      const to = PLATFORM.camelCase(attrSyntax.target);
      const info = new BindableInfo(to, BindingMode.toView);
      symbol.bindings.push(new BindingSymbol(command, info, expr, attrSyntax.rawValue, to));

      ++i;
    }
    node.parentNode.replaceChild(symbol.marker as Node, node);
  }

  private bindManifest(parentManifest: IElementSymbol, node: HTMLTemplateElement | HTMLElement): void {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bindManifest', slice.call(arguments)); }

    switch (node.nodeName) {
      case 'LET':
        // let cannot have children and has some different processing rules, so return early
        this.bindLetElement(parentManifest, node);
        if (Tracer.enabled) { Tracer.leave(); }
        return;
      case 'SLOT':
        // slot requires no compilation
        this.surrogate.hasSlots = true;
        if (Tracer.enabled) { Tracer.leave(); }
        return;
    }

    // nodes are processed bottom-up so we need to store the manifests before traversing down and
    // restore them again afterwards
    const parentManifestRootSave = this.parentManifestRoot;
    const manifestRootSave = this.manifestRoot;
    const manifestSave = this.manifest;

    // get the part name to override the name of the compiled definition
    this.partName = node.getAttribute('part');

    let manifestRoot: CustomElementSymbol;
    let name = node.getAttribute('as-element');
    if (name === null) {
      name = node.nodeName.toLowerCase();
    }
    const elementInfo = this.resources.getElementInfo(name);
    if (elementInfo === null) {
      // there is no registered custom element with this name
      this.manifest = new PlainElementSymbol(node);
    } else {
      // it's a custom element so we set the manifestRoot as well (for storing replace-parts)
      this.parentManifestRoot = this.manifestRoot;
      manifestRoot = this.manifestRoot = this.manifest = new CustomElementSymbol(this.dom, node, elementInfo);
    }

    // lifting operations done by template controllers and replace-parts effectively unlink the nodes, so start at the bottom
    this.bindChildNodes(node);

    // the parentManifest will receive either the direct child nodes, or the template controllers / replace-parts
    // wrapping them
    this.bindAttributes(node, parentManifest);

    if (manifestRoot !== undefined && manifestRoot.isContainerless) {
      node.parentNode.replaceChild(manifestRoot.marker as Node, node);
    } else if (this.manifest.isTarget) {
      node.classList.add('au');
    }

    // restore the stored manifests so the attributes are processed on the correct lavel
    this.parentManifestRoot = parentManifestRootSave;
    this.manifestRoot = manifestRootSave;
    this.manifest = manifestSave;

    if (Tracer.enabled) { Tracer.leave(); }
  }

  public bind(node: HTMLTemplateElement): PlainElementSymbol {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bind', slice.call(arguments)); }
    if (Profiler.enabled) { enter(); }

    const surrogateSave = this.surrogate;
    const parentManifestRootSave = this.parentManifestRoot;
    const manifestRootSave = this.manifestRoot;
    const manifestSave = this.manifest;

    const manifest = this.surrogate = this.manifest = new PlainElementSymbol(node);

    const attributes = node.attributes;
    let i = 0;
    while (i < attributes.length) {
      const attr = attributes[i];
      const attrSyntax = this.attrParser.parse(attr.name, attr.value);

      if (invalidSurrogateAttribute[attrSyntax.target] === true) {
        if (Profiler.enabled) { leave(); }
        throw new Error(`Invalid surrogate attribute: ${attrSyntax.target}`);
        // TODO: use reporter
      }
      const attrInfo = this.resources.getAttributeInfo(attrSyntax);
      if (attrInfo === null) {
        this.bindPlainAttribute(attrSyntax, attr);
      } else if (attrInfo.isTemplateController) {
        if (Profiler.enabled) { leave(); }
        throw new Error('Cannot have template controller on surrogate element.');
        // TODO: use reporter
      } else {
        this.bindCustomAttribute(attrSyntax, attrInfo);
      }
      ++i;
    }

    this.bindChildNodes(node);

    this.surrogate = surrogateSave;
    this.parentManifestRoot = parentManifestRootSave;
    this.manifestRoot = manifestRootSave;
    this.manifest = manifestSave;

    if (Profiler.enabled) { leave(); }
    if (Tracer.enabled) { Tracer.leave(); }
    return manifest;
  }

  private bindPlainAttribute(attrSyntax: AttrSyntax, attr: Attr): void {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bindPlainAttribute', slice.call(arguments)); }

    if (attrSyntax.rawValue.length === 0) {
      if (Tracer.enabled) { Tracer.leave(); }
      return;
    }

    const command = this.resources.getBindingCommand(attrSyntax);
    const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
    const manifest = this.manifest;
    const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);

    if (manifest.flags & SymbolFlags.isCustomElement) {
      const bindable = (manifest as CustomElementSymbol).bindables[attrSyntax.target];
      if (bindable !== undefined) {
        // if the attribute name matches a bindable property name, add it regardless of whether it's a command, interpolation, or just a plain string;
        // the template compiler will translate it to the correct instruction
        (manifest as CustomElementSymbol).bindings.push(new BindingSymbol(command, bindable, expr, attrSyntax.rawValue, attrSyntax.target));
        manifest.isTarget = true;
      } else if (expr !== null || attrSyntax.target === 'ref') {
        // if it does not map to a bindable, only add it if we were able to parse an expression (either a command or interpolation)
        manifest.attributes.push(new PlainAttributeSymbol(attrSyntax, command, expr));
        manifest.isTarget = true;
      }
    } else if (expr !== null || attrSyntax.target === 'ref') {
      // either a binding command, an interpolation, or a ref
      manifest.attributes.push(new PlainAttributeSymbol(attrSyntax, command, expr));
      manifest.isTarget = true;
    } else if (manifest === this.surrogate) {
      // any attributes, even if they are plain (no command/interpolation etc), should be added if they
      // are on the surrogate element
      manifest.attributes.push(new PlainAttributeSymbol(attrSyntax, command, expr));
    }

    if (command === null && expr !== null) {
      // if it's an interpolation, clear the attribute value
      attr.value = '';
    }

    if (Tracer.enabled) { Tracer.leave(); }
  }

  private declareTemplateController(attrSyntax: AttrSyntax, attrInfo: AttrInfo): TemplateControllerSymbol {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'declareTemplateController', slice.call(arguments)); }

    let symbol: TemplateControllerSymbol;
    // dynamicOptions logic here is similar to (and explained in) bindCustomAttribute
    const command = this.resources.getBindingCommand(attrSyntax);
    if (command === null && attrInfo.hasDynamicOptions) {
      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
      this.partName = null;
      this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
    } else {
      symbol = new TemplateControllerSymbol(this.dom, attrSyntax, attrInfo, this.partName);
      const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
      this.partName = null;
    }

    if (Tracer.enabled) { Tracer.leave(); }
    return symbol;
  }

  private bindMultiAttribute(symbol: IResourceAttributeSymbol, attrInfo: AttrInfo, value: string): void {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bindMultiAttribute', slice.call(arguments)); }

    const attributes = parseMultiAttributeBinding(value);
    let attr: IAttrLike;
    for (let i = 0, ii = attributes.length; i < ii; ++i) {
      attr = attributes[i];
      const attrSyntax = this.attrParser.parse(attr.name, attr.value);
      const command = this.resources.getBindingCommand(attrSyntax);
      const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      let bindable = attrInfo.bindables[attrSyntax.target];
      if (bindable === undefined) {
        // everything in a dynamicOptions expression must be used, so if it's not a bindable then we create one on the spot
        bindable = attrInfo.bindables[attrSyntax.target] = new BindableInfo(attrSyntax.target, BindingMode.toView);
      }

      symbol.bindings.push(new BindingSymbol(command, bindable, expr, attrSyntax.rawValue, attrSyntax.target));
    }

    if (Tracer.enabled) { Tracer.leave(); }
  }

  private bindCustomAttribute(attrSyntax: AttrSyntax, attrInfo: AttrInfo): void {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bindCustomAttribute', slice.call(arguments)); }

    const command = this.resources.getBindingCommand(attrSyntax);
    let symbol: CustomAttributeSymbol;
    if (command === null && attrInfo.hasDynamicOptions) {
      // a dynamicOptions (semicolon separated binding) is only valid without a binding command;
      // the binding commands must be declared in the dynamicOptions expression itself
      symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
      this.bindMultiAttribute(symbol, attrInfo, attrSyntax.rawValue);
    } else {
      // we've either got a command (with or without dynamicOptions, the latter maps to the first bindable),
      // or a null command but without dynamicOptions (which may be an interpolation or a normal string)
      symbol = new CustomAttributeSymbol(attrSyntax, attrInfo);
      const bindingType = command === null ? BindingType.Interpolation : command.bindingType;
      const expr = this.exprParser.parse(attrSyntax.rawValue, bindingType);
      symbol.bindings.push(new BindingSymbol(command, attrInfo.bindable, expr, attrSyntax.rawValue, attrSyntax.target));
    }
    this.manifest.attributes.push(symbol);
    this.manifest.isTarget = true;

    if (Tracer.enabled) { Tracer.leave(); }
  }

  private bindAttributes(node: HTMLTemplateElement | HTMLElement, parentManifest: IElementSymbol): void {
    if (Tracer.enabled) { Tracer.enter('TemplateBinder', 'bindAttributes', slice.call(arguments)); }

    const { parentManifestRoot, manifestRoot, manifest } = this;
    // This is the top-level symbol for the current depth.
    // If there are no template controllers or replace-parts, it is always the manifest itself.
    // If there are template controllers, then this will be the outer-most TemplateControllerSymbol.
    let manifestProxy: IParentNodeSymbol = manifest;

    const replacePart = this.declareReplacePart(node);

    let previousController: TemplateControllerSymbol;
    let currentController: TemplateControllerSymbol;

    const attributes = node.attributes;
    let i = 0;
    while (i < attributes.length) {
      const attr = attributes[i];
      ++i;
      if (attributesToIgnore[attr.name] === true) {
        continue;
      }
      const attrSyntax = this.attrParser.parse(attr.name, attr.value);
      const attrInfo = this.resources.getAttributeInfo(attrSyntax);

      if (attrInfo === null) {
        // it's not a custom attribute but might be a regular bound attribute or interpolation (it might also be nothing)
        this.bindPlainAttribute(attrSyntax, attr);
      } else if (attrInfo.isTemplateController) {
        // the manifest is wrapped by the inner-most template controller (if there are multiple on the same element)
        // so keep setting manifest.templateController to the latest template controller we find
        currentController = manifest.templateController = this.declareTemplateController(attrSyntax, attrInfo);

        // the proxy and the manifest are only identical when we're at the first template controller (since the controller
        // is assigned to the proxy), so this evaluates to true at most once per node
        if (manifestProxy === manifest) {
          currentController.template = manifest;
          manifestProxy = currentController;
        } else {
          currentController.templateController = previousController;
          currentController.template = previousController.template;
          previousController.template = currentController;
        }
        previousController = currentController;
      } else {
        // a regular custom attribute
        this.bindCustomAttribute(attrSyntax, attrInfo);
      }
    }

    processTemplateControllers(this.dom, manifestProxy, manifest);

    if (replacePart === null) {
      // the proxy is either the manifest itself or the outer-most controller; add it directly to the parent
      parentManifest.childNodes.push(manifestProxy);
    } else {
      // there is a replace-part attribute on this node, so add it to the parts collection of the manifestRoot
      // instead of to the childNodes
      replacePart.parent = parentManifest;
      replacePart.template = manifestProxy;

      // if the current manifest is also the manifestRoot, it means the replace-part sits on a custom
      // element, so add the part to the parent wrapping custom element instead
      const partOwner = manifest === manifestRoot ? parentManifestRoot : manifestRoot;
      partOwner.parts.push(replacePart);

      processReplacePart(this.dom, replacePart, manifestProxy);
    }

    if (Tracer.enabled) { Tracer.leave(); }
  }