Open In App

HTML is Attribute

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

isAttribute
HTML is Attribute Example Output

Supported Browsers:


Article Tags :

Similar Reads