Last Updated : 23 Jul, 2025
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 ExampleExample 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:
HTML is Attribute Example OutputSupported Browsers:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4