HTML Templates: Difference between revisions

Revision as of 19:22, 7 January 2026

//creating template <template>

   <section>

HTML Templateseverything 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)

const template = document.createElement('template')

template.innerHTML = ` <nav>


       <img src="./assets/logo.png" alt="logo">


        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/services">Services</a>
        <a href="/contact">Contact</a>

</nav>
`
// create a navBar class, and clone the content of the template into it
class navBar extends HTMLElement {

   constructor() {
       super()
       this.attachShadow({ mode: 'open' })
       this.shadowRoot.appendChild(template.content.cloneNode(true))
   }

} // define a custom element called 'nav-bar' using the navBar class customElements.define('nav-bar', navBar)

@@ Line 15: / Line 15: @@
 </code>
-<h2> Shadow DOM</h2>
 <code>
-// create a div element
+const template = document.createElement('template')
-const htmlSection = document.createElement('div')
-// create HTML using template literals
+template.innerHTML = `
-const content = `
+<nav>
-<h3>This is a heading</h3>
+    <div>
-<p>this content is meant to be added to the shadow DOM</p>
+        <img src="./assets/logo.png" alt="logo">
+    </div>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/services">Services</a></li>
+        <li><a href="/contact">Contact</a></li>
+    </ul>
+</nav>
 `
-htmlSection.innerHTML = content
+// create a navBar class, and clone the content of the template into it
-// select the element with a class called root
+class navBar extends HTMLElement {
-const root = document.querySelector('.root')
+    constructor() {
-// attach a shadow DOM to the selected element
+        super()
-root.attachShadow({ mode: 'open' })
+        this.attachShadow({ mode: 'open' })
-// append the html element to the shadow DOM
+        this.shadowRoot.appendChild(template.content.cloneNode(true))
-root.shadowRoot.appendChild(htmlSection)
+    }
-</code>
+}
-<h2>create custom element</h2>
+// define a custom element called 'nav-bar' using the navBar class
-class anyName extends HTMLElement {}
+customElements.define('nav-bar', navBar)
-customElements.define('custom-element', anyName)
-//now use custom component
-<custom-element>Some text here</custom-element>
 </code>