Lesson 25 / 28

Templates & Custom Elements

The building blocks behind 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
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.