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 |
||
| 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> | ||
Revision as of 19:18, 7 January 2026
//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)
create custom element
class anyName extends HTMLElement {} customElements.define('custom-element', anyName) //now use custom component <custom-element>Some text here</custom-element>