How to use the @pluginjs/dom.parseHTML function in @pluginjs/dom

initialize() {
    this.initContent()
    this.$wrap = wrap(`<div class="${this.classes.WRAP}"></div>`, this.element)
    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    this.$inner = parseHTML(`<div class="${this.classes.INNER}"></div>`)
    this.$on = parseHTML(`<div class="${this.classes.ON}">${this.onText}</div>`)
    this.$off = parseHTML(
      `<div class="${this.classes.OFF}">${this.offText}</div>`
    )
    this.$handle = parseHTML(`<div class="${this.classes.HANDLE}"></div>`)

    this.$inner.append(this.$on, this.$handle, this.$off)

    this.$wrap.append(this.$inner)

    this.initIcon()

    if (this.options.size !== null) {
      addClass(
        this.getClass(this.classes.SIZE, 'size', this.options.size),
        this.$wrap
      )
    }
    // get components width
    this.distance = this.$wrap.clientWidth - getWidth(this.$handle)

const perOfGrid = 100 / (num - 1)
    const perOfValue = 100 / (len - 1)

    this.scale = parseHTML('<div></div>')
    addClass(instance.classes.SCALE, this.scale)
    this.lines = parseHTML('<ul></ul>')
    addClass(instance.classes.LINES, this.lines)
    this.values = parseHTML('<ul></ul>')
    addClass(instance.classes.VALUES, this.values)

    for (let i = 0; i &lt; num; i++) {
      let list
      if (i === 0 || i === num || i % ((num - 1) / (len - 1)) === 0) {
        list = parseHTML(`<li class="${instance.classes.GRID}"></li>`)
      } else if (i % scale.grid === 0) {
        list = parseHTML(`<li class="${instance.classes.INLINEGRID}"></li>`)
      } else {
        list = parseHTML('<li></li>')
      }

      // position scale
      setStyle('left', `${perOfGrid * i}%`, list)
      append(list, this.lines)
    }

    for (let v = 0; v &lt; len; v++) {
      // position value
      const li = parseHTML(`<li><span>${scale.values[v]}</span></li>`)
      setStyle('left', `${perOfValue * v}%`, li)
      append(li, this.values)
    }

buildGroup(pack, group, icons) {
    if (!this.groupTemplate) {
      this.groupTemplate = templateEngine.compile(
        this.options.templates.group.call(this)
      )
    }

    const $group = parseHTML(
      this.groupTemplate({
        classes: this.classes,
        group
      })
    )

    pack.__items[group] = {
      group,
      items: {},
      $dom: $group
    }

    icons.forEach(icon => {
      if (Object.prototype.hasOwnProperty.call(pack.icons, icon)) {
        $group.appendChild(this.buildItem(pack, icon, pack.icons[icon], group))
      }

buildPack(pack) {
    if (!this.packTemplate) {
      this.packTemplate = templateEngine.compile(
        this.options.templates.pack.call(this)
      )
    }

    const $pack = parseHTML(
      this.packTemplate({
        classes: this.classes,
        pack
      })
    )

    pack.__dom = $pack
    pack.__items = {}

    if (pack.classifiable === false) {
      each(pack.icons, (name, label) => {
        $pack.appendChild(this.buildItem(pack, name, label))
      })
    } else {
      each(pack.categories, (category, icons) => {
        $pack.appendChild(this.buildGroup(pack, category, icons))

)
      } else {
        this.instance.navLabel = parseHTML(options.navLabelTpl)
        addClass(this.instance.classes.NAVLABEL, this.instance.navLabel)
        insertBefore(this.instance.navLabel, this.instance.$nav)
      }

      this.dropToggle(true)
    } else if (this.mode === 'scroll') {
      if (options.navWrapSelector) {
        this.instance.navWrap = query(
          options.navWrapSelector,
          this.instance.element
        )
      } else {
        const navWrap = parseHTML(options.navWrapTpl)
        addClass(this.instance.classes.NAVWRAP, navWrap)
        wrap(navWrap, this.instance.$nav)

        this.instance.navWrap = query(
          `.${this.instance.classes.NAVWRAP}`,
          this.instance.element
        )
      }

      this.scrollToggle(true)
    }

    addClass(this.modeClass, this.instance.element)

    this.instance.enter('built')
  }

getElement(type, ...args) {
    const template = this.options.templates[type]
    let html = ''

    html = templateEngine.render(
      template.call(this),
      deepMerge(
        {
          classes: this.classes
        },
        ...args
      )
    )

    return parseHTML(html)
  }

append(items) {
    const html = this.getItemsHtml(items)

    if (html) {
      this.element.append(...parseHTML(html))
    }

    this.$filters = this.getFilters()
    this.filtersData = this.getFiltersData(this.$filters)
  }

createEl(tempName, options) {
    return parseHTML(
      template.compile(this.options.templates[tempName]())(options)
    )
  }

initOverlay() {
    if (this.options.overlay) {
      this.$overlay = parseHTML(`<div class="${this.classes.OVERLAY}"></div>`)

      if (isString(this.options.overlay)) {
        setStyle('background', this.options.overlay, this.$overlay)
      }
      append(this.$overlay, this.$video)
    }
  }

initialize() {
    const options = this.options

    this.$handle = query(this.options.handleSelector, this.element)

    if (!this.$handle) {
      this.$handle = parseHTML(
        templateEngine.compile(options.handleTemplate)({
          handle: this.classes.HANDLE
        })
      )
      append(this.$handle, this.element)
    } else {
      addClass(this.classes.HANDLE, this.$handle)
    }

    this.setHandlePosition(0)

    addClass(this.classes.CONTAINER, this.element).setAttribute(
      'draggable',
      false
    )