Understand how the template tag works and how they are parsed and treated by containing web pages.
- [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.
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.
Joe Marini starts the course by going into HTML templates, which provide a browser-native way to declare sections of HTML markup that will be used frequently in your app. Next, he covers HTML imports, explaining how to use them and create reusable modules. Then, he takes you through working with custom elements. To wrap up the course, he discusses Shadow DOM and how to create Shadow DOM to define custom element structure and rendering within a page.
- Web standards
- Customizing web components
- Activating and using templates
- Using HTML imports
- Creating reusable modules
- Defining custom elements
- Customizing elements and styles
- Creating Shadow DOM
- Styling and Shadow DOM