What is the <template> tag and when would you use it?

0-2 years experience

1. 1You're building a simple todo list. The designer gives you an <li> template for each item. Show me how you'd use <template> to stamp out new items when the user clicks 'Add'.
2. 2A teammate wrote `<template id='t'><div>{{name}}</div></template>` and does `t.innerHTML = t.innerHTML.replace('{{name}}', 'Alice')`. What's wrong with that approach and how would you fix it using the template API?

2-5 years experience

1. 1We're rendering a table with 500 rows from a <template>. Users report jank when sorting. Walk me through how you'd profile this and what template-specific optimizations you'd try.
2. 2A component uses <template> + Shadow DOM for encapsulation. Styles defined inside the template aren't applying. What are the likely causes and how do you verify the style scoping is working?

5-8 years experience

1. 1Design a reusable <data-grid> web component that accepts a <template> slot for custom row rendering. How do you handle type-safe props passed to the row template, and what's your strategy for efficient re-renders when only sort order changes?
2. 2During SSR hydration, your <template>-based components flicker because the server HTML doesn't match the client-stamped DOM. How do you architect the template system to support seamless hydration without duplicating template logic?

8+ years experience

1. 1Your org has 12 micro-frontends each with their own <template> patterns. You're tasked with creating a shared template registry that enforces versioning, schema validation, and tree-shaking. What's the governance model and how do you handle breaking changes across teams?
2. 2A legacy codebase uses string-based templating (Handlebars) everywhere. You're leading a migration to native <template> + web components. Outline the incremental strategy, risk mitigation for partial adoption, and how you measure performance regression during the transition.