Using hidden container:
This method place the template's content into a hidden container. The main pitfall of this way is that the browser fetch resources from the template, even the image (in case below) is have not been used yet.
<div style="display: none"> <img src="https://static.zinoui.com/img/logo.png"> </div>
Using script tag:
This approach use .innerHTML to inject the template content into the DOM. It would lead to possible XSS attacks.
<script type="text/template"> <img src="https://static.zinoui.com/img/logo.png"> </script>
That's the place where the native
<template> could help.
Native templates to the rescue
A method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents. Part of the Web Components' set of standards.
- where to define?
<template>element can be placed into <head>, <body>, <frameset> and <colgroup>
- what to contain?
- Metadata content - base, link, meta, noscript, script, style, template, title
- Flow content - Most elements that are used in the body of documents and applications are categorized as flow content: a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text
- Any valid HTML content that is permitted to occur within the ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select
Actually the template's content is not part of DOM until is used, e.g. styles will not apply, scripts will not run, HTML will not render, images will not download.
In order to use a template, first you need to clone it, then insert it into the DOM.
- HTML Markup
<template> <li> <a href=""></a> </li> </template> <ul></ul>
// Clone the fragment var template = document.querySelector('template'); var item = document.importNode(template.content, true); // Change the fragment var a = item.querySelector('a'); a.textContent = 'Test link'; a.href = 'https://www.example.com'; // Insert the fragment into the DOM document.querySelector('ul').appendChild(item);
Chrome 26+, Firefox 22+, Safari 7.1+, Opera 15+. For old browsers try polyfills like this JSFiddle.
The new HTML5 template element looks very promising and has a bright future since it solves the problems with current template approaches. Our working demo demonstrates use of template tag with live example.
Drop a comment below telling me what do you think about the HTML Templates. And don't forget to share with your colleagues. Thanks so much for reading.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
Comments are closed