使用原生js自定义内置标签
-
效果图
-
代码
<!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>