HTML Templates - Revision history

Jlebeau81 at 19:28, 7 January 2026

2026-01-07T19:28:54Z

← Older revision		Revision as of 19:28, 7 January 2026
Line 1:		Line 1:
	~~<code>~~

			<!--
	//creating template		//creating template
	<template>		<template>
Line 14:		Line 14:
	document.querySelector('main').appendChild(template)		document.querySelector('main').appendChild(template)

	~~</code~~>		-->
	<!-- const template = document.createElement('template')		<!-- const template = document.createElement('template')

Line 40:		Line 40:
	// define a custom element called 'nav-bar' using the navBar class		// define a custom element called 'nav-bar' using the navBar class
	customElements.define('nav-bar', navBar)		customElements.define('nav-bar', navBar)
	~~</code>~~-->		-->

Jlebeau81 at 19:27, 7 January 2026

2026-01-07T19:27:38Z

← Older revision		Revision as of 19:27, 7 January 2026
Line 15:		Line 15:

	</code>		</code>
	<~~code><script>>~~		<!-- const template = document.createElement('template')
	const template = document.createElement('template')

	template.innerHTML = `		template.innerHTML = `
Line 41:		Line 40:
	// define a custom element called 'nav-bar' using the navBar class		// define a custom element called 'nav-bar' using the navBar class
	customElements.define('nav-bar', navBar)		customElements.define('nav-bar', navBar)
	</code>~~</script~~>		</code>-->

Jlebeau81 at 19:25, 7 January 2026

2026-01-07T19:25:55Z

← Older revision		Revision as of 19:25, 7 January 2026
Line 15:		Line 15:

	</code>		</code>
	<code><~~nowiki~~>		<code><script>>
	const template = document.createElement('template')		const template = document.createElement('template')

Line 41:		Line 41:
	// define a custom element called 'nav-bar' using the navBar class		// define a custom element called 'nav-bar' using the navBar class
	customElements.define('nav-bar', navBar)		customElements.define('nav-bar', navBar)
	</code></~~nowiki~~>		</code></script>

Jlebeau81 at 19:24, 7 January 2026

2026-01-07T19:24:18Z

← Older revision		Revision as of 19:24, 7 January 2026
Line 15:		Line 15:

	</code>		</code>
	<code>		<code><nowiki>
	const template = document.createElement('template')		const template = document.createElement('template')

Line 41:		Line 41:
	// define a custom element called 'nav-bar' using the navBar class		// define a custom element called 'nav-bar' using the navBar class
	customElements.define('nav-bar', navBar)		customElements.define('nav-bar', navBar)
	</code>		</code></nowiki>

Jlebeau81 at 19:22, 7 January 2026

2026-01-07T19:22:13Z

← Older revision		Revision as of 19:22, 7 January 2026
Line 15:		Line 15:

	</code>		</code>
	~~<h2> Shadow DOM</h2>~~
	<code>		<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>		</code>

Jlebeau81 at 19:18, 7 January 2026

2026-01-07T19:18:39Z

← Older revision		Revision as of 19:18, 7 January 2026
Line 31:		Line 31:
	// append the html element to the shadow DOM		// append the html element to the shadow DOM
	root.shadowRoot.appendChild(htmlSection)		root.shadowRoot.appendChild(htmlSection)
			</code>
			<h2>create custom element</h2>
			class anyName extends HTMLElement {}
			customElements.define('custom-element', anyName)
			//now use custom component
			<custom-element>Some text here</custom-element>
	</code>		</code>

Jlebeau81: Created page with " `//creating 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') // cr..."
2026-01-07T19:11:30Z
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..."
New page
<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')

// create HTML using template literals

const content = `

<h3>This is a heading</h3>

<p>this content is meant to be added to the shadow DOM</p>

`

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)

</code>

HTML Templates - Revision history

Jlebeau81 at 19:28, 7 January 2026

Jlebeau81 at 19:27, 7 January 2026

Jlebeau81 at 19:25, 7 January 2026

Jlebeau81 at 19:24, 7 January 2026

Jlebeau81 at 19:22, 7 January 2026

Jlebeau81 at 19:18, 7 January 2026

Jlebeau81: Created page with " //creating template HTML Templates everything in a template tag is not displayed on the browser. //using template const template = document.querySelector('template') const clone = template.content.cloneNode(true) document.querySelector('main').appendChild(template)

HTML Templates

Shadow DOM

Jlebeau81: Created page with " `//creating template //using template const template = document.querySelector('template') const clone = template.content.cloneNode(true) document.querySelector('main').appendChild(template)`