The template tags {{}} are moved out of <table>

[cwang1221]

Background & Context

I'm having an HTML template. In the template, I'd like to create a table of employees, so I have the following code:

<table>
  <tbody>
    {{#employees}}
    <tr>
      <td>
        {{id}}
      </td>
      <td>
        {{name}}
      </td>
    </tr>
    {{/employees}}
  </tbody>
</table>

We have the template tags {{#employees}} and {{/employees}} surrounding the <tr> element, which means it will loop on the employees and create multiple table rows.

Bug

After sanitization with dompurify, the template tags {{#employees}} and {{/employees}} are considered as improper children element of a table, so they are moved out of the <table> element, which breaks the generation of our template.

{{#employees}} {{/employees}}
<table>
  <tbody>
    <tr>
      <td>
        {{id}}
      </td>
      <td>
        {{name}}
      </td>
    </tr>
  </tbody>
</table>

Input

<table>
  <tbody>
    {{#employees}}
    <tr>
      <td>
        {{id}}
      </td>
      <td>
        {{name}}
      </td>
    </tr>
    {{/employees}}
  </tbody>
</table>

Given output

{{#employees}} {{/employees}}
<table>
  <tbody>
    <tr>
      <td>
        {{id}}
      </td>
      <td>
        {{name}}
      </td>
    </tr>
  </tbody>
</table>

Expected output

I expect that the template tags should not be moved.

<table>
  <tbody>
    {{#employees}}
    <tr>
      <td>
        {{id}}
      </td>
      <td>
        {{name}}
      </td>
    </tr>
    {{/employees}}
  </tbody>
</table>

Feature

Is there any options provided to not move the improper children elements? Like the template tags. Thank you so much!

[cure53]

Hm, hard to fix because the browser itself removes them as they are creating invalid tables. Maybe you can solve it with a hook, but not much we can do here from a core library perspective.