All geek questions in one place

HTML 5 Template Tag (Page Refresh)

I wanted to use the HTML 5 template tag, but there was some confusing behavior after refreshing the page. Maybe first I will show you the code:

<!doctype html> <meta charset=utf-8> <title>HTML 5 - template test</title> <template> <h1>This is an awesome new HTML 5 template</h1> <p>.. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content .. some even more awesome content</p> </template> <div></div> <script> var template = document.querySelector('template'), templateContent = template.content.cloneNode(true); console.log(template); console.log(templateContent); document.querySelector('div').appendChild(templateContent); </script>

Actually, this works as expected, but some confusing things happen in the console. When I open the first page, she says:

http://i.stack.imgur.com/xDJBo.png

but when I refresh the page, it shows the following:

http://i.stack.imgur.com/W23YF.png

When I repeat this, I see the material from the first picture again. I tried this also on jsbin, and there I do not see this behavior: http://jsbin.com/ofotah/1

I really don’t know what is going on there. I am using Google Chrome version 27.0.1453.110 (Windows). I hope you help me with this.

+4
source share
1 answer

This is actually not a template, it's a funky Chrome quirk, which sometimes appears. It will do the same for other element tags in conditions that are almost impossible to reproduce, but the actual contents of the object are never affected. It just sometimes captures the serialization of toString (), and sometimes it serializes the object.

However, as Andbdrew points out, the template tag is still an element of the project, and we are far from any decision about how he should be the correct user or how to access them, so given how your sample code uses it, I recommend that use the <script type="text/template">...</script> element and select it using document.querySelector("script[type='text/template']"); instead of using the experimental element =)

+1
source

Source: https://habr.com/ru/post/1485091/

More articles:


All Articles