|
Answer» These are used to create reusable custom elements which are very difficult in traditional HTML. It consists of three technologies: - Custom elements - These are JavaScript APIs that help in defining custom elements and their behavior.
- Shadow DOM - These are JavaScript APIs that attach an encapsulated shadow DOM tree to an element to keep the element’s features private and unaffected by other parts.
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>composed and composedPath DEMO</title><script src="main.js" defer></script> </head> <body><H1><code>composed</code> and <code>composedPath</code> demo</h1><open-shadow text="I have an open shadow root"></open-shadow><closed-shadow text="I have a closed shadow root"></closed-shadow> </body></html>customElements.define('open-shadow', class EXTENDS HTMLElement {constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(pElem);} });customElements.define('closed-shadow', class extends HTMLElement {constructor() { super(); const pElem = document.createElement('p'); pElem.textContent = this.getAttribute('text'); const shadowRoot = this.attachShadow({mode: 'closed'}); shadowRoot.appendChild(pElem);} });document.querySelector('html').addEventListener('click', e => { console.log(e.composed); console.log(e.composedPath());});Here 2 custom elements are defined <open-shadow> and <closed-shadow> which takes their text content and inserts them into a shadow DOM as content of a <p> element. - HTML templates - The markup templates are written using <template> and <slot> elements which can be reused multiple times as the basis of a custom element's structure.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Simple template</title> <script src="main.js"></script></head><body> <h1>Simple template</h1> <template id="my-paragraph"><style> p { color: white; background-color: #666; padding: 5px; }</style><p><slot NAME="my-text">My default text</slot></p> </template> <my-paragraph><span slot="my-text">Let's have some different text!</span> </my-paragraph> <my-paragraph><ul slot="my-text"> <li>Let's have some different text!</li> <li>In a LIST!</li></ul> </my-paragraph></body></html>customElements.define('my-paragraph', class extends HTMLElement {constructor() { super(); const template = document.getElementById('my-paragraph'); const templateContent = template.content; this.attachShadow({mode: 'open'}).appendChild( templateContent.cloneNode(true) );} });const slottedSpan = document.querySelector('my-paragraph span');console.log(slottedSpan.assignedSlot);console.log(slottedSpan.slot);Here we are reusing the <my-paragraph> template. References:Mozilla MDN W3C Additional Resource- Practice Coding
- HTML MCQ
- HTML Books
- How To Become Front End Developer
- CSS Interview Questions
- Difference Between HTML and HTML5
- Difference Between Frontend and Backend
- Features of HTML
- HTML Projects
- HTML IDE
- Difference Between HTML and JavaScript
- HTML5 Features
- Difference Between HTML and XML
|
