Lesson 26 / 30
Templates & Custom Elements
Meet the template element and custom elements that underpin reusable Web Components.
The template tag
<template> holds inert markup — it's parsed but not rendered until JavaScript clones and inserts it.
Custom elements
Web Components let you define your own tags, like <user-card>, backed by JavaScript classes — this is what frameworks like Angular build on top of, conceptually.
Quick check: What's true about content inside a <template> tag?
- It renders immediately like normal HTML
- It's inert until JavaScript clones it into the page
- It's invalid HTML
- It is rendered twice
Answer
It's inert until JavaScript clones it into the page — Template content is parsed but stays hidden and inactive until explicitly cloned via script.