How to use the @aurelia/runtime-html.createElement function in @aurelia/runtime-html

it(`can handle ${str} props`, function () {
          const type = createType();
          const ctx = TestContext.createHTMLTestContext();
          //@ts-ignore
          const actual = sut(ctx.dom, type, props);

          const node = actual['node'] as Element;
          const instruction = (actual['instructions'][0][0] as any) as HydrateElementInstruction;

          assert.strictEqual(actual['instructions'].length, 1, `actual['instructions'].length`);
          assert.strictEqual(actual['instructions'][0].length, 1, `actual['instructions'][0].length`);
          assert.strictEqual(instruction.instructions.length, 0, `instruction.instructions.length`);
          assert.strictEqual(node.getAttribute('class'), 'au', `node.getAttribute('class')`);
        });
      });

it(`understands targeted instruction type=${t}`, function () {
          const ctx = TestContext.createHTMLTestContext();
          //@ts-ignore
          const actual = sut(ctx.dom, tag, { prop: { type: t }});

          const instruction = actual['instructions'][0][0] as TargetedInstruction;
          const node = actual['node'] as Element;

          assert.strictEqual(actual['instructions'].length, 1, `actual['instructions'].length`);
          assert.strictEqual(actual['instructions'][0].length, 1, `actual['instructions'][0].length`);
          assert.strictEqual(instruction.type, t, `instruction.type`);
          assert.strictEqual(node.getAttribute('class'), 'au', `node.getAttribute('class')`);
        });
      });

},
      [
        createElement(dom, 'thead', {}, [
          createElement(dom, 'tr', {
            $1: new HydrateTemplateController({
              name: '',
              template: ' ',
              instructions: [[new TextBindingInstruction(`\${col | pascal}`)]],
              strategy
            },
            'repeat',
            [new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
            )
          })
        ]),
        createElement(dom, 'tbody', {
          $1: new HydrateTemplateController({
            name: '',
            template: '',
            instructions: [[new HydrateTemplateController({
              name: '',
              template: ' ',
              instructions: [[new TextBindingInstruction(`\${row[col]}`)]],
              strategy
            },
            'repeat',
            [new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
            )]]
          },
          'repeat',
          [new IteratorBindingInstruction(this.keyedStrategy ? 'row of rows' : 'row of rows', 'items')]
          )

private createSubject(): void {
    let strategy: BindingStrategy;
    if (this.proxyStrategy) {
      strategy |= BindingStrategy.proxies;
    }
    const dom = this.$controller.context.get>(IDOM);
    this.subject = createElement(
      dom,
      'table',
      {
        class: 'table is-fullwidth',
      },
      [
        createElement(dom, 'thead', {}, [
          createElement(dom, 'tr', {
            $1: new HydrateTemplateController({
              name: '',
              template: ' ',
              instructions: [[new TextBindingInstruction(`\${col | pascal}`)]],
              strategy
            },
            'repeat',
            [new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
            )
          })
        ]),
        createElement(dom, 'tbody', {
          $1: new HydrateTemplateController({
            name: '',
            template: '',
            instructions: [[new HydrateTemplateController({

private createSubject(): void {
    let strategy: BindingStrategy;
    if (this.proxyStrategy) {
      strategy |= BindingStrategy.proxies;
    }
    const dom = this.$controller.context.get>(IDOM);
    this.subject = createElement(
      dom,
      'table',
      {
        class: 'table is-fullwidth',
      },
      [
        createElement(dom, 'thead', {}, [
          createElement(dom, 'tr', {
            $1: new HydrateTemplateController({
              name: '',
              template: ' ',
              instructions: [[new TextBindingInstruction(`\${col | pascal}`)]],
              strategy
            },
            'repeat',
            [new IteratorBindingInstruction(this.keyedStrategy ? 'col of cols' : 'col of cols', 'items')]
            )
          })
        ]),
        createElement(dom, 'tbody', {
          $1: new HydrateTemplateController({
            name: '',
            template: '',