"bad template" but why?

[Philipp Knecht]

Hi there

Not sure why i get a "bad template" message on this one:

let content = html`<div>
  <caption>
    Hurray
  </caption>
  <div class="fd-table__header">
    <tr class=${`someClass`}></tr>
  </div>
</div> `;
render(document.getElementById("app"), content);

It's highly possible i'm doing something stupidly wrong :)

When removing the root <div> it will work

https://codesandbox.io/s/compassionate-benji-zn94ke?file=/src/index.js

[Andrea Giammarchi]

a TR inside a DIV makes literally zero sense by HTML standards.

[Philipp Knecht]

Whoa, fastest answer i've ever got :)
But why is it not failing when removing the root div?

Btw. i've changed it so it uses tbody instead of the div. the div just got there because i was fiddling/testing around

and i needed to do that because i have my own custom elements which renders a table nicely using separate custom element for each row.
(just saying that because i know the structure looks maybe a bit ugly)

[Andrea Giammarchi]

to extend a TR you need custom elements builtin extends, natively available on every browser, easy to polyfill in Safari after feature detection. Every other attempt is a broken approach to TR, TD, TBODY, or TABLE in general Custom Elements extend.

That being said, forget about this library, and check this code in a console:

const outer = document.createElement('div');
outer.innerHTML = '<div><tr></tr></div>';
console.log(outer.outerHTML);
// "<div><div></div></div>"

where is the TR? nowhere, so the hole in that template cannot be mapped to anything, so template error because your template contains errors: it doesn't represent any valid HTML and this is by specifications so it won't ever be fixed in here because this utility is to define valid HTML ... there's some helper there, but not a whole new non-standard engine to create without any specification reference.

Any better?

[Andrea Giammarchi]

P.S. if you'd like to complain about Safari choice around making certain elements not possible to extend please do as your case has been raised already by everyone in the field.

[Philipp Knecht]

Ok thanks. Makes sense to me now👍
I like how your lib helps me to understand html better :)