Container cannot go inside a tbody

[johnaweiss]

This bug affects group-header templates.

A span inside a tbody is invalid HTML. A tbody tag cannot support span tags as direct children, only tr tags. Therefor , the following will fail:

HTML

<template id="test">
<table>
	<tbody>
		<!-- CONTAINER FOR ITEMS -->
		<span hidden mt-template="team-member" mt-records="[[RECORDS]]"></span>
	</tbody>
</table>'
</template>

JS

const tb = document.querySelector("#test");
console.log (tb.innherHTML);    // fails

The innerHTML property of the template will actually move the span outside of the table, and place it above the table.

Result of tb.innerHTML

<span hidden mt-template="team-member" mt-records="[[RECORDS]]"></span>
<table>
	<tbody>
		<!-- CONTAINER FOR ITEMS -->
	</tbody>
</table>'

[johnaweiss]

Possible solutions:

• Don't support tables. User display: table/grid/flex instead. Preferred answer, at the moment.

• Comment the container. But that loses HTML syntax validation and IDE coloring. Not great. Although, the records-container is relatively simple HTML, and it's just a single tag, so not that terrible.

• Use a tr instead of span. Seems like a weird workaround.

  • OTOH, the script currently allows any tag to be a container (as long as it contains mt-template attribute).
  • Still, a single tr can't be a container for the records, because each record needs to get a tr (tr wraps the record-template). Won't work.
  • Delete the container tag when inserting the records. The container is a placeholder, and serves no function. So we could use any legal tag as a placeholder, and then overwrite it with the record-items. Not terrible, and maybe we should be doing that anyway. But still misleading to use a tr as placeholder.

• keep the span inside the tbody, and load the source via AJAX as a string, then use use a DOMParser to parse it as XML and get the content. Sounds complicated.

• any other ideas?