From the course: Learning Web Components

Overview of HTML templates

From the course: Learning Web Components

Start my 1-month free trial

Overview of HTML templates

“

- [Narrator] In this chapter we're going to learn about the HTML template tag, which is one of the foundation pieces of building reusable web components. Of course, as I said earlier, you can also use it in your webpages just by itself if you want to, even if you're not building or using web components. The concept of using templates to create web content has been around for quite a while now. There has been a variety of template solutions developed over the years, such as handle bars, mustache, dust, django, and many others. However, plain old standard HTML hasn't had native support for templates until the introduction of the template tag. The template tag provides a way for you to declare a bunch of HTML mark up that you don't want the browser to use in any way until your app is ready to do so. The content of the template is parsed by the browser but it is effectively hidden from the rest of the webpage. So, for example, using JavaScript functions like get element by ID won't return child nodes of a template element. In addition, the template content is said to be inert. In other words, things like scripts don't execute, network requests for images aren't made, and so on, until the template is actually instantiated and placed into the page. Templates can be placed in the body, the head, inside of tables and select lists, essentially anywhere that the HTML parser allows content modeled child nodes. The template element is also natively supported by all the major modern browsers, Chrome, Edge, Firefox, and Safari. In the next movie, we'll see how to use a template to store some mark up, and then we'll activate the template and use it to add content to our webpage.

Contents