---
title: Bitovi Academy - Writing a template
description: Learn how `<template>` can be used to create reusable DOM that can be cloned and used within your components.
---

- ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg)
  
  [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us)
- ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg)
  
  [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us)
- ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg)
  
  [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us)
- ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg)
  
  [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us)
- ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg)
  
  [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us)
- [View more
  
  →
  
  ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us)

We're Experts in...

- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us)
- [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us)
- [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us)

Showcase

![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png)

[View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us)

More Projects

- [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us)
- [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies)
- [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us)
- [View more
  
  →
  
  ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us)

Open Source Tools

We build powerful tools and open source them to support the community.

[See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us)

- [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg)
  
  BlogWe post about perfecting software delivery
  
  ](https://bitovi.com/blog)
- [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg)
  
  PartnershipsLearn about Bitovi's technology partners
  
  ](https://www.bitovi.com/partnerships?hsLang=en-us)
- [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg)
  
  AcademyFree courses to build delivery skills
  
  ](https://www.bitovi.com/academy/?hsLang=en-us)
- [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg)
  
  Open source toolsUse our tools or contribute to our open source mission.
  
  ](https://www.bitovi.com/open-source?hsLang=en-us)

Let's Connect

- [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg)
  
  Discord
  
  ](https://discord.gg/J7ejFsZnJ4)
- [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg)
  
  LinkedIn
  
  ](https://www.linkedin.com/company/bitovi/)
- [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg)
  
  GitHub
  
  ](https://github.com/bitovi/)

![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png)

Name *

Work Email *

Phone

What's your project?

Send

### Contact Us

(312) 620-0386contact@bitovi.com

- [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us)
- [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us)
- [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us)
- [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us)
- [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us)
- [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) 
    - [ Why Web Components ](https://www.bitovi.com/academy/learn-web-components/why-wc.html?hsLang=en-us)
    - [ Our first component ](https://www.bitovi.com/academy/learn-web-components/first-component.html?hsLang=en-us)
    - [ Writing a template ](https://www.bitovi.com/academy/learn-web-components/templates.html?hsLang=en-us)
    - [ Map View ](https://www.bitovi.com/academy/learn-web-components/map-view.html?hsLang=en-us)
    - [ bus-tracker component ](https://www.bitovi.com/academy/learn-web-components/bus-tracker-component.html?hsLang=en-us)
    - [ Listing routes ](https://www.bitovi.com/academy/learn-web-components/listing-routes.html?hsLang=en-us)
    - [ Selecting a route ](https://www.bitovi.com/academy/learn-web-components/select-a-route.html?hsLang=en-us)
    - [ Display markers for vehicles ](https://www.bitovi.com/academy/learn-web-components/display-markers.html?hsLang=en-us)
    - [ Customize header styles ](https://www.bitovi.com/academy/learn-web-components/customize-header.html?hsLang=en-us)
    - [ Slotted content ](https://www.bitovi.com/academy/learn-web-components/slotted-content.html?hsLang=en-us)
    - [ Dispatching events ](https://www.bitovi.com/academy/learn-web-components/dispatching-events.html?hsLang=en-us)
- [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us)
- [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us)
- [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us)
- [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us)
- [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us)
- [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us)
- [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us)
- [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us)
- [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us)
- [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us)
- [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us)

[View More Courses](https://www.bitovi.com/academy/#courses) [ ]

# Writing a template `page`

Learn how `<template>` can be used to create reusable DOM that can be cloned and used within your components.

Create a [new CodePen](https://codepen.io/pen/) for this exercise. This new CodePen can be used for the rest of the exercises in this training.

## Overview

In this part, we will:

- Create a template that includes the HTML we need for our [Google map](https://www.google.com/maps) component.

## Problem

The Google map API needs an element to mount the map into. We want our map to be certain dimensions. Create a `250px` tall container for the map using `<template>`. In the end it should look like the CodePen with the grey box below::

![A rectangle for where we will display the map.](https://bitovi.github.io/academy/static/img/web-components/map-view-rect.png)

## How to Solve This Problem

1. Create a `template` element that contains a `div` that will act as the container for the Google Map, as well as the styles.
2. Add the global styles to the CSS tab in CodePen.
3. In the JS tab write the JavaScript necessary to clone and activate the template, appending it to the `body`.

## Technical requirements

The following CSS will give the container the dimensions we want.

```
.gmap {
  width: 100%;
  height: 250px;
  background-color: grey;
}
```

Use the class name `.gmap` for the container element.

Add the following as ***global*** styles to the page:

```
html,
body {
  height: 100%;
}
body {
  font-family: "Catamaran", sans-serif;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  margin: 0;
}
```

## What you need to know

To solve this, you will need to know:

- What the `<template>` element is.
- How to create a new instance of a template.

### The template element

A `<template>` is an element whose children are **inert**. This means that the browser doesn’t render them, like it will for nodes outside of templates. Images will not load, scripts will not execute, styles are not applied.

```
<template>
  <h1>Cats</h1>

  <!-- This will not load yet -->
  <img src="/images/purfect.png" />
</template>
```

You can’t grab content inside of a template using the normal DOM APIs like [document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or [document.getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). They only exist within the template’s `content` fragment.

```
let h1 = document.querySelector('h1');
console.log(h1); // null

let template = document.querySelector('template');
h1 = template.content.querySelector('h1');
console.log(h1); // <h1>Cats</h1>
```

### Creating instances of a template

Templates can be cloned using `template.content.cloneNode(true)` or `document.importNode(template.content, true)`. The latter is useful if you ever need to clone a template contained within another document, but otherwise they are equivalent.

Cloning a template returns a [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment), a collection of DOM nodes that can be quickly inserted into an element.

```
let template = document.querySelector('template');
let fragment = document.importNode(template.content, true);

document.body.append(fragment);
// Our cat picture is now loading!
```

## Solution

✏️ Start by creating the template. Give it an `id` so that we can more easily query it to use it in our component.

Click to see the solution

```
<style>
  html,
  body {
    height: 100%;
  }
  body {
    font-family: "Catamaran", sans-serif;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
</style>
<template id="gmap-template">
  <style>
    .gmap {
      width: 100%;
      height: 250px;
      background-color: grey;
    }
  </style>
  <div class="gmap"></div>
</template>
<script type="module">
const template = document.querySelector('#gmap-template');

let fragment = document.importNode(template.content, true);
document.body.append(fragment);
</script>

```

Running this code should show you a 250px tall grey square.

###### On this page...

###### Get help

If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4)

If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion)

## Join the Bitovi Newsletter

 Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason!  
*By providing your email you agree to receive communications from Bitovi*

![](https://bitovi.github.io/academy/static/img/close.svg)

```json
{
     "@context": "http://schema.org",
     "@type": "Organization",
     "mainEntityOfPage":{
          "@type":"WebPage",
          "@id":"https://www.bitovi.com/academy/learn-web-components/templates.html",
          "description": "Learn how `<template>` can be used to create reusable DOM that can be cloned and used within your components. 
"
     },
     "url": "http://bitovi.com",
     "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
     "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
     "name": "Bitovi Web App Consulting",
     "alternateName": "Bitovi",
      "naics": "541511",
      "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
     "address": {
          "@type": "PostalAddress",
          "streetAddress": "1134 Pine Tree Lane ",
          "addressLocality": "Libertyville",
          "addressRegion": "IL",
          "addressCountry": "United States",
          "postalCode": "60048"
     },
     "areaServed": {
          "@type": "GeoCircle",
          "geoMidpoint": {
               "@type": "GeoCoordinates",
               "latitude": "41.8781",
               "longitude": "87.6298"
          },
          "geoRadius": "5000 km"
     },
     "telephone": "312-620-0386",
     "email": "contact@bitovi.com",
     "sameAs": [
          "https://www.facebook.com/BitoviLLC/",
          "https://twitter.com/bitovi",
          "https://www.linkedin.com/company/bitovi"
     ]
}
```