<template> & <slot>
Inert markup for cloning, and Web Components composition.
1Reusable Markup
<template> holds HTML that is parsed but not rendered — clone it with JavaScript when needed. <slot> is used inside Web Components for content distribution.
<template id="card-template">
<article class="card">
<h3></h3>
<p></p>
</article>
</template>
<script>
const tpl = document.getElementById('card-template');
const clone = tpl.content.cloneNode(true);
clone.querySelector('h3').textContent = 'Hello';
document.body.append(clone);
</script>2Put the element in context
Completing a reading roadmap is a way to track practice, not a professional qualification. Local progress is useful on the current device, but it is not a cloud record. Understanding a topic means being able to explain and apply it, not only marking a checkbox.
3Practice with a small page
Choose a topic you marked complete and build a small example without copying its code first. Compare your result with the lesson and revise it. Export any certificate you want to keep before clearing browser storage, and use mistakes to guide the next exercise.
Finished reading?
Mark this topic as complete to track progress.