How to use the @polymer/polymer/lib/utils/flattened-nodes-observer.js.FlattenedNodesObserver function in @polymer/polymer

afterNextRender(this, function() {
      this._observer = new FlattenedNodesObserver(this, info => {
        // MAKE SURE WE KNOW WHAT JUST GOT ADDED HERE
        flush();
        // if we've got new nodes, we have to react to that
        if (info.addedNodes.length > 0) {
          info.addedNodes.map(node => {
            if (this._haxElementTest(node)) {
              if (this._HTMLPrimativeTest(node)) {
                node.contentEditable = this.editMode;
              }
              // this does the real targetting
              node.setAttribute("data-editable", this.editMode);
              let haxRay = node.tagName.replace("-", " ").toLowerCase();
              let i = window.HaxStore.instance.gizmoList.findIndex(
                j => j.tag === node.tagName.toLowerCase()
              );
              if (i !== -1) {

firstUpdated() {
    this.setAttribute('role', 'radiogroup');

    this._addActiveListeners();

    this._observer = new FlattenedNodesObserver(this, info => {
      const checkedChangedListener = e => {
        if (e.target.checked) {
          this._changeSelectedButton(e.target);
        }
      };

      // reverse() is used to set the last checked radio button value to radio group value
      filterRadioButtons(info.addedNodes)
        .reverse()
        .forEach(button => {
          button.addEventListener('checked-changed', checkedChangedListener);
          if (this.disabled) {
            button.disabled = true;
          }
          if (button.checked) {
            this._changeSelectedButton(button);

connectedCallback() {
    super.connectedCallback();
    const container = this.shadowRoot.querySelector('slot');

    // Allow vertical scrolling
    const carousel = this.shadowRoot.querySelector('#carousel');
    Gestures.addListener(carousel, 'track', this._drag.bind(this));
    this.setScrollDirection('all', carousel);

    new FlattenedNodesObserver(container, () => {
      this._children = FlattenedNodesObserver.getFlattenedNodes(this)
        .filter((n) =>
          n.nodeType === Node.ELEMENT_NODE
          && n.nodeName !== 'DOM-REPEAT'
          && n.nodeName !== 'TEMPLATE');
    });
    // Handle transition end
    const items = this.shadowRoot.querySelector('#items');
    items.addEventListener('transitionend', (e) => {
      e.preventDefault();
      if (this.swiping || e.propertyName !== 'transform') {
        return;
      }
      this._setAnimating(false);
    });
  }

connectedCallback() {
    super.connectedCallback();
    window.addEventListener(
      "hax-store-property-updated",
      this._haxStorePropertyUpdated.bind(this)
    );
    window.addEventListener("hax-store-ready", this._storeReady.bind(this));
    window.SimpleToast.requestAvailability();
    this.__lock = false;
    window.addEventListener("hax-save", this._saveFired.bind(this));
    // notice ANY change to body and bubble up, only when we are attached though
    if (this.syncBody) {
      FlattenedNodesObserver(window.HaxStore.instance.activeHaxBody, info => {
        if (!this.__lock) {
          this.__lock = true;
          this.dispatchEvent(
            new CustomEvent("hax-body-content-changed", {
              bubbles: true,
              cancelable: true,
              composed: true,
              detail: window.HaxStore.instance.activeHaxBody.haxToContent()
            })
          );
          setTimeout(() => {
            this.__lock = false;
          }, 100);
        }
      });
    }

setTimeout(() => {
      if (this.querySelector('template')) {
        this._observer = new FlattenedNodesObserver(this.$.content, () => this._updateContent());
      } else if (this.childNodes.length) {
        console.error(':', 'content must be provided inside a <template> tag');
      }
    });
  }</template>

connectedCallback(){
        super.connectedCallback();
        this.__nodesObserver = new FlattenedNodesObserver(this, this._handleNodesObserverUpdate);
    }

protected _addGroup(node:OptgroupElement) {
        const add = (itemNode: any) => {
            if ( isSelectableElement(itemNode) ) {
                this._addNode(itemNode);
            }
        };

        const remove = (itemNode: any) => {
            if (isSelectableElement(itemNode)) {
                this._removeNode(itemNode);
            }
        };

        const childObserver: NodeObserver = new FlattenedNodesObserver(node, (info: NodeObservation) => {
            info.removedNodes.forEach(remove);
            info.addedNodes.forEach(add);
            this.requestRender();
        });
        this._groups.push(node);
        this._groupObservers.push(childObserver);

        //we must go through all children nodes and add them to the flat-map
        //TODO: this doesn't support adding/removing nodes from a group :(
        for(let itemNode of node.children) {
            add(itemNode);
        }
    }

connectedCallback(){
        super.connectedCallback();
        this.__nodesObserver = new FlattenedNodesObserver(this, this._handleNodesObserverUpdate);
    }

firstUpdated() {
    const checkedChangedListener = e => this._changeSelectedCheckbox(e.target);

    this._observer = new FlattenedNodesObserver(this, info => {
      const addedCheckboxes = filterCheckboxes(info.addedNodes);

      addedCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('checked-changed', checkedChangedListener);
        if (this.disabled) {
          checkbox.disabled = true;
        }

        if (checkbox.checked) {
          this._addCheckboxToValue(checkbox.value);
        }
      });

      filterCheckboxes(info.removedNodes).forEach(checkbox => {
        checkbox.removeEventListener('checked-changed', checkedChangedListener);
        if (checkbox.checked) {