5 ms·

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

> 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

kitsunesoba 4y ago
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.
- grimgrin 4y ago
  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/ARIA/Attributes/aria-hidden https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
  - cantSpellSober 4y ago
    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`)
    - grimgrin 4y ago
      oh yes yes. what was i thinking! ty for correction
- ataylor32 4y ago
  Are you sure? It's my understanding that screen readers know to ignore elements with display:none;
- lelandfe 4y ago
  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/#techniques https://webaim.org/techniques/css/invisiblecontent/#techniqu...
runarberg 4y ago
> 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.
- labrador 4y ago
  Thanks for the tip. I should read the spec again so I don't miss these.
Stamp01 4y ago
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.
- galaxyLogic 4y ago
  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.
  - forgotusername6 4y ago
    Hidden forms are an example of display:none that will not be displayed later
  - xigoi 4y ago
    > 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.
apatheticonion 4y ago
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.
- spankalee 4y ago
  Adding a <template> tag later is great for perf too because the contents are still inert and fast to clone.
miohtama 4y ago
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-template-element https://html.spec.whatwg.org/multipage/scripting.html#the-te...
- galaxyLogic 4y ago
  There is also lazy loading of images see https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading https://developer.mozilla.org/en-US/docs/Web/Performance/Laz... .
rokhayakebe 4y ago
I assume content within "display:none" will be read by search engines and viewed in source. Is <template> read by search engines?
- jamesfinlayson 4y ago
  Search engines would know to ignore the initial <template> but I'm not sure how display: none is handled.
cantSpellSober 4y ago
<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
- imaginamundo 4y ago
  I read an article about it that i liked a lot. https://web.dev/declarative-shadow-dom/ 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 https://github.com/imaginamundo/webcomponents
spankalee 4y ago
<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.
- tomhallett 4y ago
  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.
- sgc 4y ago
  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?

kitsunesoba 4y ago

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.

grimgrin 4y ago
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/ARIA/Attributes/aria-hidden https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- cantSpellSober 4y ago
  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`)
  - grimgrin 4y ago
    oh yes yes. what was i thinking! ty for correction
ataylor32 4y ago
Are you sure? It's my understanding that screen readers know to ignore elements with display:none;
lelandfe 4y ago
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/#techniques https://webaim.org/techniques/css/invisiblecontent/#techniqu...

runarberg 4y ago

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

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

Stamp01 4y ago

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.

galaxyLogic 4y ago
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.
- forgotusername6 4y ago
  Hidden forms are an example of display:none that will not be displayed later
- xigoi 4y ago
  > 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.

apatheticonion 4y ago

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.

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

miohtama 4y ago

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-template-element https://html.spec.whatwg.org/multipage/scripting.html#the-te...

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

rokhayakebe 4y ago

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

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

cantSpellSober 4y ago

<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

imaginamundo 4y ago
I read an article about it that i liked a lot. https://web.dev/declarative-shadow-dom/ 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 https://github.com/imaginamundo/webcomponents

spankalee 4y ago

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

tomhallett 4y ago
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.
sgc 4y ago
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?