[templates] How to handle expressions in tables

[justinfagnani]

Currently, this won't parse in a way that's useful for dynamically creating tables:

<template>
  <table>
    {{rows}}
  </table>
</template>

because the {{rows}} text will be fostered to before the table.

A couple of options are:

• Offer a fallback syntax that can be parsed inside a table, like <!--{{rows}}--> or <?{{rows}}>
• Change the parsing rules inside <template> so that disallowed content is not fostered.

[jakearchibald]

Parser changes can be limited to cases where the first non-whitespace chars are {{

[justinfagnani]

If there are parser changes, I think we might still need a syntax fallback for older browsers using a template parts polyfill.

[matthewp]

@justinfagnani Am I reading this right, is the idea that you can pass something like a DocumentFragment as rows to createInstance()? Meaning values are not all toStringed? If so, what types are allowed?

[justinfagnani]

@matthewp yes, the key type allowed besides Strings are Nodes, especially TemplateInstance form this proposal.

[jakearchibald]

TPAC: consensus for parser changes.

[wanderview]

I don't think anyone from mozilla parser team has weighed in yet. cc / @hsivonen

[jakearchibald]

Apologies, I just wanted to capture what happened in the room, it wasn't definitive (but I see how it can be read like that).

[dy]

That problem can be addressed purely symptomatically with a couple of strong heuristics.

1. If there's insertion {{ }} right before the empty table, almost likely it was intended to be inside but parser hoisted it up.
2. If the insertion {{ }} contains <tbody>, <tr>, <th> etc. - most surely it was supposed to reside in the <table>.

These two conditions I believe exclude practical chance user meant to place <tr> (or <thead> etc.) right before the empty <table>.

[dy]

As discovered in templize and uce-template, the simplest workaround is

<template>
  <table>
    <!--{{rows}}-->
  </table>
</template>

It has zero cost from performance/code size perspective.