Re:Templating in HTML
by tomhallett on Tuesday October 04, 2022 @09:48PM
(#33090019)
In addition - “template” also conveys correct semantics to the other developers working on the codebase. If I see an html at the bottom with “display: none” it’s very possible that the intended usage is to leave it there and set “display: block”, ie a modal. “display: none” doesn’t convey “clone me”, but “template” does.
You can use templates for simpler items as indicated in the linked article, but it seems like it would be best used for larger datasets. I would usually load those async to avoid blocking the page while they download. Does it provide practical advantages over loading html to a js object via fetch?
- The elements in it are parsed into a different document and are inert until cloned or adopted into the main document. Images don't load, scripts don't run, styles don't apply, etc. This is very important.
- The content model validation is turned off, so a <template> can contain a <td>
- Mutation observers and events are not fired for parsed content.
- The <template> element itself can appear anywhere, including restricted content elements like <table>
- Other HTML processing libraries generally know to ignore <template>, unlike other content just hidden with CSS.
This makes parsing faster and guaranteed to have no side effects, and conveys the correct semantics to the browser and tools.