HTML is Attribute

Last Updated : 08 Mar, 2024

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>