HTML Templates: Difference between revisions
Created page with "<code> //creating template <template> <section> <h2>HTML Templates</h2> <p>everything in a template tag is not displayed on the browser.</p> </section> </template> //using template const template = document.querySelector('template') const clone = template.content.cloneNode(true) document.querySelector('main').appendChild(template) </code> <h2> Shadow DOM</h2> <code> // create a div element const htmlSection = document.createElement('div') // cr..." |
No edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<!-- | |||
//creating template | //creating template | ||
<template> | <template> | ||
| Line 14: | Line 14: | ||
document.querySelector('main').appendChild(template) | document.querySelector('main').appendChild(template) | ||
< | --> | ||
< | <!-- const template = document.createElement('template') | ||
< | |||
// | template.innerHTML = ` | ||
<nav> | |||
// | <div> | ||
<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> | |||
` | ` | ||
// 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) | |||
--> | |||
Latest revision as of 19:28, 7 January 2026