HTML is Attribute
The HTML is attribute global attribute allows a standard element to adopt behavior defined by a custom built-in element, but only after the custom element is defined.
Syntax
<tag is="word-count"></tag>
Here, the tag could be any HTML tag.
HTML is Attribute Example
Example 1: In this example, we define a custom element <p is=”word-count”> that dynamically counts the words in its parent article’s content and displays the count.
HTML
<!DOCTYPE html> < html > < body > < article contenteditable = "" > < p > HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. </ p > < p is = "word-count" ></ p > </ article > < script > class WordCount extends HTMLParagraphElement { constructor() { super(); const shadow = this.attachShadow({ mode: "open", }); const span = document.createElement( "span" ); shadow.appendChild(span); setInterval(() => { const text = this.parentNode .innerText || this.parentNode .textContent; span.textContent = `Words: ${ text.split(/\s+/g) .length }`; }, 200); } } customElements.define( "word-count", WordCount, { extends: "p" } ); </ script > </ body > </ html > |
Output:
Supported Browsers:
Contact Us