使用原生js自定义内置标签

使用原生js自定义内置标签

  1. 效果图

    使用原生js自定义内置标签

  2. 代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <article contenteditable="" id="textbox">
            我是文字
        </article>
    
        <p is="word-count"></p>
    </body>
    <script>
        class WordCount extends HTMLParagraphElement {
            constructor() {
                super();
    
                var wc = document.getElementById("textbox");
    
                function countWords(node) {
                    var text = node.innerText || node.textContent
                    console.log(text, text.length)
                    return text.length;
                }
                var count = '字数: ' + countWords(wc);
    
                // 创建影子节点
                var shadow = this.attachShadow({ mode: 'open' });
    
                // 创建要给span标签,展示文字个数
                var text = document.createElement('span');
                text.setAttribute('class', 'text');
                text.textContent = count;
    
                var style = document.createElement('style');
                style.textContent = 
                `
                    .text{
                        color: green;
                        font-size: 25px;
                    }
                `
    
                // 将文字添加到影子节点中
                shadow.appendChild(style);
                shadow.appendChild(text);
    
    
                // Update count when element content changes
                setInterval(function () {
                    var count = '字数: ' + countWords(wc);
                    text.textContent = count;
                }, 200)
    
            }
        }
    
        // Define the new element
        customElements.define('word-count', WordCount, { extends: 'p' });
    
    </script>
    
    </html>
上一篇:.NET轻松写博客园爬虫


下一篇:CentOS7部署Oracle GoldenGate for MySQL 19.1(远程抽取)