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

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?

Upvotes: 11

Answers (6)

Fabian von Ellerts

Reputation: 5201

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.

Upvotes: 1

user116313

Reputation: 25

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

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

Upvotes: 1

roof01

Reputation: 95

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

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

Upvotes: 9

Supersharp

Reputation: 31181

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.

Upvotes: 7

Dr.Avalanche

Reputation: 1996

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

Upvotes: 3

ˈvɔlə

Reputation: 10242

You are searching for the html5shiv.

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

Upvotes: 2

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

Answers (6)

Related Questions