Utilising HTML Templates

HTML TemplatesWeb Components

Utilising HTML Templates

In this lesson, we’ll explore HTML Templates, an integral part of the Web Components technology that allows for efficient, reusable markup. HTML Templates, defined using the <template> tag, enable you to declare fragments of HTML that are not rendered immediately when a page loads. Instead, these templates can be instantiated and added to the document dynamically with JavaScript.

Introduction to HTML Templates

The <template> tag in HTML provides a mechanism to hold client-side content that you don’t want to be rendered when the page loads. The content inside a <template> can include anything a regular HTML page can contain, such as images, styles, scripts, and other HTML structures. Templates are ideal for reusable components or elements that you intend to use multiple times throughout your application.

Creating and Using Templates

To create an HTML template, simply enclose the desired markup within a <template> tag. Add the following to your HTML file:

html 
	<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="UTF-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title>Web Components Introduction</title>
	    <script src="my-greeting.js" defer></script>
	    <script src="my-shadowed-element.js" defer></script>
	  </head>
	  <body>
	    <my-greeting></my-greeting>
	    <my-shadowed-element></my-shadowed-element>
	    
	      <div>
	        <p>Template content goes here.</p>
	      </div>
	    
	  </body>
	</html>

This template is not displayed on the page initially. To render the template’s content, you’ll need to use JavaScript to clone and insert it into the document.

You’ll see that nothing is displayed on the page, however there is a <template> element in the DOM. This is because the template content is inert and not rendered by the browser. To use the template, you need to clone its content and insert it into the document.

HTML Template Figure 1. HTML Template

Cloning and Inserting Templates with JavaScript

Templates are inert until they are activated with JavaScript. To use a template, you must clone its content and then insert the clone into the document. This process typically involves the following steps:

  1. Access the template: Use document.getElementById() or a similar method to get the template element.
  2. Clone the content: Call the content.cloneNode(true) method on the template element to create a deep clone of its content.
  3. Insert the clone: Append the cloned content to the desired part of the document using methods like appendChild() or insertBefore().

Here’s how you can implement these steps. Create a new JavaScript file named my-template.js and add the following code:

javascript 
	// Access the template
	const template = document.getElementById('myTemplate');
	
	// Clone the content
	const clone = template.content.cloneNode(true);
	
	// Insert the clone into the document
	document.body.appendChild(clone);

Make sure to import the script into your HTML file:

html 
	<script src="./my-template.js" defer></script>

You’ll now see that the template content is rendered on the page. The JavaScript code accesses the template, clones its content, and inserts the clone into the document.

Template Content Figure 1. An example showing template content

Best Practices for Template Management

  • Use meaningful IDs: If you have multiple templates, use descriptive and unique IDs for each to make your code more readable.
  • Consider accessibility: Ensure that any content dynamically added from templates is accessible. This might involve managing focus or using ARIA attributes as needed.
  • Optimise for performance: Reuse templates whenever possible, especially for elements that are created multiple times, to improve your application’s performance.

Summary

HTML Templates offer a powerful and efficient way to manage and reuse markup in your web applications. By understanding and utilising templates, you can create more maintainable, scalable, and performant web components. This lesson covered the basics of creating, cloning, and inserting templates, setting the stage for more advanced component development techniques in subsequent lessons.

Reference