(Replying to PARENT post)

> 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, it might be very cumbersome to do so manually with document.createElement and element.setAttribute.

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

👤labrador🕑3y🔼0🗨️0

(Replying to PARENT post)

<template> is special, very different from display: none; and definitely has a few advantages:

- 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.

👤spankalee🕑3y🔼0🗨️0

(Replying to PARENT post)

I think the main advantages are that you don't have to remember to add "display:none", and that it gives the structure more semantic meaning. If I look at your code and see "display:none", I don't know why you've chosen to hide it. If it's wrapped in a <template> element, I instantly know why it's not being displayed as I now have an idea of how it's going to be used.
👤Stamp01🕑3y🔼0🗨️0

(Replying to PARENT post)

If I recall correctly there are some subtle things you cannot achieve without <template>.

<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...

👤miohtama🕑3y🔼0🗨️0

(Replying to PARENT post)

> for example a dialog box

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.

👤runarberg🕑3y🔼0🗨️0

(Replying to PARENT post)

I think it's mostly performance as the browser can add performance optimisations for HTML but not unevaluated JavaScript.

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.

👤apatheticonion🕑3y🔼0🗨️0

(Replying to PARENT post)

Front end web is not my forte, but as I understand display:none; can have unintended (usually negative) interactions with screen readers, which I don't believe is a possibility with HTML templates.
👤kitsunesoba🕑3y🔼0🗨️0

(Replying to PARENT post)

<template> (along with <slot>) allows for a declarative shadow DOM instead of clunky attachShadow()s on hidden <div>s (which doesn't work server-side)

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

👤cantSpellSober🕑3y🔼0🗨️0

(Replying to PARENT post)

I assume content within "display:none" will be read by search engines and viewed in source. Is <template> read by search engines?
👤rokhayakebe🕑3y🔼0🗨️0