HTML Templates
//creating template
<template>
<section>
HTML Templates
everything in a template tag is not displayed on the browser.
</section>
</template>
//using template
const template = document.querySelector('template')
const clone = template.content.cloneNode(true)
document.querySelector('main').appendChild(template)
Shadow DOM
// create a div element
const htmlSection = document.createElement('div')
// create HTML using template literals
const content = `
This is a heading
this content is meant to be added to the shadow DOM
`
htmlSection.innerHTML = content
// select the element with a class called root
const root = document.querySelector('.root')
// attach a shadow DOM to the selected element
root.attachShadow({ mode: 'open' })
// append the html element to the shadow DOM
root.shadowRoot.appendChild(htmlSection)