Template Instantiating — Complete Guide
In this tutorial, you will learn about Template Instantiating. We cover key concepts, practical examples, and best practices to help you master this topic.
Template instantiating involves cloning template content, populating it with data, and appending to Shadow Dom for efficient Web Component rendering.
What You'll Learn
- How to instantiate templates with dynamic data
- How to bind data to template clones efficiently
- How to handle repeated template rendering
- How to clean up template instances
Why It Matters
Efficient template instantiation is key to performant Web Components. Creating 1000 items from a template should be fast and memory-efficient.
flowchart LR A[Template] --> B[cloneNode] B --> C[Populate with data] C --> D[querySelector] C --> E[textContent] D --> F[shadowRoot.appendChild]
Data Binding to Templates
class UserList extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._users = [];
}
set users(data) {
this._users = data;
this.render();
}
render() {
const template = document.getElementById('user-item');
const fragment = document.createDocumentFragment();
this._users.forEach(user => {
const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = user.name;
clone.querySelector('.email').textContent = user.email;
clone.querySelector('img').src = user.avatar;
clone.querySelector('img').alt = user.name;
fragment.appendChild(clone);
});
const list = this.shadowRoot.querySelector('.list') || document.createElement('div');
list.className = 'list';
list.innerHTML = '';
list.appendChild(fragment);
if (!this.shadowRoot.contains(list)) {
this.shadowRoot.appendChild(list);
}
}
}
customElements.define('user-list', UserList);
Efficient Re-rendering
class EfficientList extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._cache = new Map();
}
render(items) {
const fragment = document.createDocumentFragment();
items.forEach(item => {
let clone = this._cache.get(item.id);
if (!clone) {
const template = document.getElementById('item-template');
clone = template.content.cloneNode(true);
this._cache.set(item.id, clone);
}
this._populate(clone, item);
fragment.appendChild(clone);
});
this.shadowRoot.innerHTML = '';
this.shadowRoot.appendChild(fragment);
}
}
customElements.define('efficient-list', EfficientList);
Common Mistakes
- Creating elements from strings instead of cloning templates
- Not using DocumentFragment for batch inserts
- Caching clones incorrectly (event listeners not re-attached)
Practice Questions
- How do you populate a template clone? Use querySelector to find elements and set textContent/src.
- Why use DocumentFragment with templates? Batches multiple clones into a single DOM insertion.
Mini Project
Build a notification feed component. Each notification is rendered from a template. Support different notification types (info, success, warning, error) by switching template content. Use DocumentFragment for batch rendering.
What's Next
Lesson 10: Template Slot Advanced
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro