HTML5 template not working on Internet Explorer, how to solve it?

Question

I made a template in HTML5 which is working with Chrome and Firefox but not working with Internet Explorer (tested on IE 8).

How can I solve this problem?

possible duplicate of [html 5 tags in IE 8 and IE 7](http://stackoverflow.com/questions/19680929/html-5-tags-in-ie-8-and-ie-7) — ˈvɔlə, Mar 06 '14 at 11:24

score 9 · Answer 1 · answered Aug 14 '17 at 18:30

9

just add "display:none" to your templates. Works for i.e. 11

<template id="fancyTemplate" style="display:none"></template>

answered Aug 14 '17 at 18:30

roof01

95
1
2

1

Great solution, thanks! [Even IE11](https://caniuse.com/#feat=template) displayes ` – dakab Feb 26 '18 at 15:40

score 7 · Answer 2 · answered Apr 21 '15 at 14:34

7

I recommend you Neovov's polyfill: https://github.com/neovov/template-element-polyfill

NB: There's a bug in IE 11: it moves <template> under the <body> element before rendering the DOM! So the parentNode attribute is wrong, and nesting will fail. You can see it in the [F12] Tool.

answered Apr 21 '15 at 14:34

Supersharp

29,002
9
92
134

This is probably as good as it goes, but it's still limited. Because the stuff inside the template tag is rendered, you have to be careful to still follow HTML nesting rules -- despite the fact that a properly functioning Template element can ignore those rules. I'm getting "unexpected end tag" and similar on some of my pages. – Stephen R Apr 10 '18 at 15:54
For example: I've been trying to put a table row in a Template. Because (I think) a TR cannot exist just inside the Body, IE is removing the TR and the TD and just leaving the contents of the TD. (Even with the shivs or polyfills, IE basically sees Template as a sort of Div-like object, and the HTML hierarchy kicks in) – Stephen R Apr 10 '18 at 16:37
You're right, it's not possible to fully polyfill a template tag – Supersharp Apr 10 '18 at 19:02
Right. Just trying to give people a heads up in case they're expecting this to be a full replacement. :-) – Stephen R May 04 '18 at 14:49

score 3 · Answer 3 · answered Mar 06 '14 at 11:24

3

Get a copy of html4shiv, and use it where IE is less than 9:

<!--[if lt IE 9]> 
<link rel="stylesheet" href="styles/ie.css" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> 
<![endif]-->

answered Mar 06 '14 at 11:24

Dr.Avalanche

1,944
2
28
37

@knotty sure, just reinvent everthing html5shiv does :) – Dr.Avalanche Mar 06 '14 at 11:31
2

knotty is right, it is not worth the effort to rewrite html5shiv. BTW why IE8? That is a version from 6 years ago. Nothing supported modern HTML5 back then. If you need a free resource to get modern internet explorer versions to test, visit http://modern.ie and there are free virtual machines available. – Chris Love Mar 06 '14 at 13:40

score 2 · Answer 4 · answered Mar 06 '14 at 11:23

2

You are searching for the html5shiv.

It 'enables' all the html5 elements, which aren't available in the old internet explorer versions.

answered Mar 06 '14 at 11:23

ˈvɔlə

9,204
10
63
89

3

` – Alvaro Aug 12 '15 at 11:24

score 1 · Answer 5 · answered Oct 11 '18 at 13:42

1

You can try to replace <template> tag by <script>

<script id="fancyTemplate"></script>

answered Oct 11 '18 at 13:42

user116313

25
3

2

Don't forget to add a type because default is javascript. `` – BYTE RIDER Nov 20 '18 at 11:40

score 1 · Answer 6 · answered May 28 '19 at 11:34

You can hide the element using CSS: template { display:none !important; }

And if you need to access/clone the content like natively possible in other browsers, use this polyfill: https://github.com/jeffcarp/template-polyfill

But keep in mind the content of the <template> can still be found in the DOM and is executed - preventing exactly that is the main goal of the tag. No polyfill can stop that from happening, IE is once again slowing down modern web development.

HTML5 template not working on Internet Explorer, how to solve it?

6 Answers6

Linked