Explain the difference between ‘template’ and ‘slot’ elements.

The <template> element holds HTML content that is not rendered in the DOM until it’s activated via JavaScript, allowing for reusable HTML fragments. The <slot> element is used within Web Components to create placeholders for content passed from the parent scope, enabling customization of component content.

Example:

<template id="my-template">
  <div>Template content here</div>
</template>