Hacker News Reader

Comment by labrador | Hacker News Reader

> 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

View on HN

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

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?

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.

Yes but when you see "display:none;" isn't it obvious that the purpose is to make it visible sometime later?

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 when you see "display:none;" isn't it obvious that the purpose is to make it visible sometime later?

Yes, but it's not obvious that it would be made visible in a different place while keeping the original invisible.

Hidden forms are an example of display:none that will not be displayed later

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

There is also lazy loading of images see https://developer.mozilla.org/en-US/docs/Web/Performance/Laz... .

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

Thanks for the tip. I should read the spec again so I don't miss these.

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.

Adding a <template> tag later is great for perf too because the contents are still inert and fast to clone.

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.

This is not true. I suspect it is a myth, I've heard it for decades now.

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

Are you sure? It's my understanding that screen readers know to ignore elements with display:none;

There’s a way to hide from screen readers too if the OP was so inclined:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

display: none hides the content from screen readers, as it is not rendered.

aria-hidden is for elements that were rendered but are hidden (it's redundant on elements with a display value of `none`)

oh yes yes. what was i thinking! ty for correction

<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

I read an article about it that i liked a lot.

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.

https://github.com/imaginamundo/webcomponents

I assume content within "display:none" will be read by search engines and viewed in source. Is <template> read by search engines?

Search engines would know to ignore the initial <template> but I'm not sure how display: none is handled.

Reply on news.ycombinator.com