- 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.
Also if you need to use the same HTML elsewhere, just copy the innerHTML of such an element and insert anywhere you want to.
Yes, but it's not obvious that it would be made visible in a different place while keeping the original invisible.
<img> inside <template> is not attempted to be loaded because “it presents nothing in rendering”
https://html.spec.whatwg.org/multipage/scripting.html#the-te...
The alternative is a "display: none" block, but that triggers a calculation of styles, where <template> can never be rendered so it's evaluated (likely in parallel to JS) by the browser without style calculations.
The optimisations lose weight if the <template> tag is added programatically later. For it to be maximally efficient; all of the <template> tags must be inlined in your HTML prior to your application loading. You can play around with loading it asynchronously to ensure nothing blocks.
WebAIM[0]:
> display:none or visibility: hidden
> The content is removed from the visual flow of the page and is ignored by screen readers
[0] https://webaim.org/techniques/css/invisiblecontent/#techniqu...
https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
aria-hidden is for elements that were rendered but are hidden (it's redundant on elements with a display value of `none`)
Otherwise you probably don't need <template>, in fact they don't handle events the same as the rest of the DOM and will likely cause more pain
https://web.dev/declarative-shadow-dom/
I even tried to build a library around this, but still don’t know how to finish it hahaha.
The <dialog> element is now supported by all modern browser. I suggest you use it. It has a lot of niceties over implementing one your self, including capturing the focus, correct announcing to assistive technologies, styling the ::backdrop element, etc.
I didn't expect the paragraph to end that way. I would write it:
Let’s start with the fact that <template> do not enabling you to do anything that’s not possible otherwise. In that way, it’s more of a convenience tool really. If you have significant HTML structures that need to be injected at runtime, you can use "display:none" to hide the HTML structure, then copy node to make and show a copy, for example a dialog box
Anyway, that's how I've been doing it. If <template> has some advantages, I'll start using it