Hi,
We often make silly mistakes with our markup, most of the time those are inoffensive and the browser will guess our intention and do the right thing like closing a tag or still render appropriately. Other times it results in some visually obvious error that is easy to identify and then fix. However, often with Handlebars in Ember, this errors result in two different types of problems:
- Metamorph issues, for example if a tag is never closed, the script metamorph script start tag is misplaced and additional elements are removed, which eventually causes a crash since ember will expect to find those elements.
- Some HTML elements aren’t removed. This happens when the wrong closing tag is used, so the end tag is nested one level deeper than need, which means that removing that section of the DOM will leave extra elements. Most of the times, that left-over markup without content doesn’t cause any problems, but sometimes it leads to rendering issues or overlaid HTML.
Those two problems are hard to find and track back to the originating template. Does anyone know if there’s a way to verify the markup generated by a template? I think this could be possible by insert into the rendering pipeline and check the buffer right before inserting it into the DOM and simply crash (or at least log this error) to have better information while working locally.
Is there something out there that already does something similar?