How to use the @marp-team/marpit.Element function in @marp-team/marpit

describe("Bespoke template's browser context", () => {
  const marp = new Marp({
    container: new MarpitElement('div', { id: 'p' }),
  })

  const defaultMarkdown = '# 1\n\n---\n\n## 2\n\n---\n\n### 3'

  const render = (
    md = defaultMarkdown,
    targetDocument = document
  ): HTMLElement => {
    targetDocument.body.innerHTML = marp.render(md).html
    return targetDocument.getElementById('p')!
  }

  const replaceLocation = >(
    path: string,
    action: () => T
  ): T => {

export const bespoke: Template = async opts => {
  const rendered = opts.renderer({
    container: new Element('div', { id: 'p' }),
    inlineSVG: true,
    slideContainer: [],
  })

  return {
    rendered,
    result: bespokePug({
      ...opts,
      ...rendered,
      bespoke: {
        css: bespokeScss,
        js: await libJs('bespoke.js'),
        osc: opts.osc ?? true,
        progress: opts.progress,
      },
      watchJs: await watchJs(opts.notifyWS),

export const bespoke: Template = async opts => {
  const rendered = opts.renderer({
    container: new Element('article', { id: 'presentation' }),
    inlineSVG: true,
    slideContainer: [],
  })

  return {
    rendered,
    result: bespokePug({
      ...opts,
      ...rendered,
      progress: false,
      bespoke: {
        css: bespokeScss,
        js: await bespokeJs(),
      },
    }),
  }