HTML is属性用法及代码示例

HTML “is” 是一个全局属性，允许您指定标准 HTML 元素的行为应类似于定义的自定义内置元素。这意味着只有在文档中成功定义了指定的自定义元素名称时才能使用该属性。
用法:

<tag is="word-count"></tag>

在这里，标签可以是任何 HTML 标签。

例：下面的示例将说明 is 属性是 HTML

HTML


<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">Geeksforgeeks</h1>
        <strong>HTML is Attribute</strong>
    </center>
  
    <article contenteditable="">
        <h2>Introduction of HTML</h2>
  
        <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. Hypertext defines the link
            between the web pages. A markup language is used
            to define the text document within tag which defines
            the structure of web pages. This language is used to
            annotate (make notes for the computer) text so that
            a machine can understand it and manipulate text accordingly.
            Most markup languages (e.g. HTML) are human-readable.
            The language uses tags to define what manipulation has
            to be done on the text.
        </p>
  
        <p is="word-count"></p>
    </article>
  
    <script>
        class WordCount extends HTMLParagraphElement {
            constructor() {
                super();
  
                const wcParent = this.parentNode;
  
                function countWords(node) {
                    const text = node.innerText || node.textContent;
                    return text.split(/\s+/g).length;
                }
  
                const count = `Words:${countWords(wcParent)}`;
  
                const shadow = this.attachShadow({ mode:'open' });
  
                const text = document.createElement('span');
                text.textContent = count;
  
                shadow.appendChild(text);
                setInterval(function () {
                    const count = `Words:${countWords(wcParent)}`;
                    text.textContent = count;
                }, 200);
            }
        }
  
        customElements.define('word-count',
            WordCount, { extends:'p' });
    </script>
</body>
  
</html>

输出：

支持的浏览器：

谷歌浏览器
Firefox
safari
Opera

相关用法

注：本文由纯净天空筛选整理自skyridetim大神的英文原创作品 HTML is Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。