HTML Templates — define markup for reuse.?

Example:

<user-card></user-card>

<template id="user-template">

<p>Hello, <span id="name"></span></p>

</template>

<script>

class UserCard extends HTMLElement {

connectedCallback() {

const tmpl = document.getElementById("user-template");

const content = tmpl.content.cloneNode(true);

content.querySelector("#name").textContent = "Sandeep";

this.appendChild(content);

customElements.define("user-card", UserCard);

</script>

Key Takeaway:

Web Components = reusable, encapsulated building blocks for modern web apps.