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

Posted 叶家伟的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用原生js自定义内置标签相关的知识,希望对你有一定的参考价值。

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

  1. 效果图

  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>
    

以上是关于使用原生js自定义内置标签的主要内容,如果未能解决你的问题,请参考以下文章

VS Code中自定义Emmet代码片段

原生 JS + Canvas 实现五子棋游戏

vscode自定义问题

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

JS原生Ajax