How to use the @lrnwebcomponents/utils/utils.js.wipeSlot function in @lrnwebcomponents/utils

_handleTokenResponse(newValue) {
    if (newValue !== null && typeof newValue.content !== typeof undefined) {
      // store the text and url callbacks in the event we're in an editing mode
      if (document.getElementById("cmstokenidtolockonto") != null) {
        document
          .getElementById("cmstokenidtolockonto")
          .setAttribute("href", newValue.editEndpoint);
        document.getElementById("cmstokenidtolockonto").innerHTML =
          newValue.editText;
        document
          .getElementById("cmstokenidtolockonto")
          .addEventListener("click", this.__tokenClicked.bind(this));
      }
      // wipe our own slot here
      wipeSlot(this);
      // now inject the content we got
      let template = document.createElement("template");
      template.innerHTML = newValue.content;
      this.appendChild(document.importNode(template.content, true));
      this.loading = false;
    }
  }
  /**

_handleviewsResponse(newValue, oldValue) {
    if (newValue !== null && typeof newValue.content !== typeof undefined) {
      // store the text and url callbacks
      if (document.getElementById("cmstokenidtolockonto") != null) {
        document
          .getElementById("cmstokenidtolockonto")
          .setAttribute("href", newValue.editEndpoint);
        document.getElementById("cmstokenidtolockonto").innerHTML =
          newValue.editText;
      }
      // wipe our own slot here
      wipeSlot(this);
      // now inject the content we got
      let frag = document.createElement("span");
      frag.innerHTML = newValue.content;
      let newNode = frag.cloneNode(true);
      this.appendChild(newNode);
      this.loading = false;
    }
  }
  /**

_themeNameChanged(newValue) {
    if (newValue) {
      store.themeElement = document.createElement(newValue);
      wipeSlot(this, "*");
      this.appendChild(store.themeElement);
    } else if (newValue && oldValue) {
      // theme changed
      store.themeElement.remove();
      // wipe out what we got
      wipeSlot(this, "*");
      store.themeElement = document.createElement(newValue);
      this.appendChild(store.themeElement);
    }
  }
  /**

_activeItemContentChanged(newValue, oldValue) {
    if (newValue) {
      var html = newValue;
      // only append if not empty
      if (html !== null) {
        wipeSlot(this, "*");
        html = encapScript(newValue);
        // insert the content as quickly as possible, then work on the dynamic imports
        microTask.run(() => {
          setTimeout(() => {
            let frag = document.createRange().createContextualFragment(html);
            this.appendChild(frag);
            const evt = new CustomEvent(
              "json-outline-schema-active-body-changed",
              {
                bubbles: true,
                composed: true,
                cancelable: false,
                detail: { html }
              }
            );
          }, 5);

_itemContentChanged(newValue, oldValue) {
    if (newValue) {
      var html = newValue;
      // only append if not empty
      if (html !== null) {
        html = encapScript(newValue);
        wipeSlot(this, "*");
        // insert the content as quickly as possible, then work on the dynamic imports
        microTask.run(() => {
          setTimeout(() => {
            let frag = document.createRange().createContextualFragment(html);
            this.appendChild(frag);
          }, 5);
        });
        // if there are, dynamically import them
        if (varExists(this.manifest, "metadata.node.dynamicElementLoader")) {
          let tagsFound = findTagsInHTML(html);
          const basePath = this.pathFromUrl(
            decodeURIComponent(import.meta.url)
          );
          for (var i in tagsFound) {
            const tagName = tagsFound[i];
            if (

for (var attr in propData.slotAttributes) {
                tmpel.setAttribute(attr, propData.slotAttributes[attr]);
              }
            }
            // support unnamed slots
            if (propData.slot !== "") {
              tmpel.slot = propData.slot;
            }
            tmpel.innerHTML = valueChange[path];
            const cloneIt = tmpel.cloneNode(true);
            // inject the slotted content but use text nodes if this is a text element
            if (window.HaxStore.instance.isTextElement(node)) {
              node.innerHTML = tmpel.innerHTML;
            } else {
              // wipe just the slot in question
              wipeSlot(node, propData.slot);
              node.appendChild(cloneIt);
            }
            this.activeHaxElement.content =
              "<template>" + cloneIt.outerHTML + "</template>";
          }
        }
      }
    }
  }
  /**

haxClearBody(confirm = true) {
    let status = true;
    // only confirm if asked so we can support wipes without it
    if (confirm) {
      status = prompt("Are you sure you want to delete all content?");
    }
    // ensure they said yes
    if (status) {
      wipeSlot(this);
    }
  }
  /**

_activeHaxElementChanged(newValue, oldValue) {
    if (typeof newValue !== typeof undefined) {
      // wipe the preview area and assocaited node
      wipeSlot(this, "*");
      this.previewNode = {};
      this.value = {};
      this.schema = {};
      this.schema = {
        schema: {}
      };
      this.modeTab = "configure";
      // if we have something, generate the new element inside it
      if (
        newValue &&
        newValue != null &&
        newValue.length != 0 &&
        newValue.tag
      ) {
        var frag = document.createElement(newValue.tag);
        frag.innerHTML = newValue.content;

changedProperties.forEach((oldValue, propName) => {
      if (propName == "id") {
        this._updateChildren(this[propName], oldValue);
      }
      if (propName == "level" || propName == "text") {
        wipeSlot(this);
        let level = document.createElement(`h${this.level}`);
        level.innerText = this.text;
        this.appendChild(level);
        this._updateChildren(this.level, oldValue);
      }
      if (["parentId", "defaultLevel"].includes(propName)) {
        this.level = this._getLevel(this.parentId, this.defaultLevel);
      }
    });
  }

changedProperties.forEach((oldValue, propName) => {
      if (propName == "id") {
        this._updateChildren(this[propName], oldValue);
      }
      if (propName == "level" || propName == "text") {
        wipeSlot(this);
        let level = document.createElement(`h${this.level}`);
        level.innerText = this.text;
        this.appendChild(level);
        this._updateChildren(this.level, oldValue);
      }
      if (["parentId", "defaultLevel"].includes(propName)) {
        this.level = this._getLevel(this.parentId, this.defaultLevel);
      }
    });
  }