使用原生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>
使用原生js自定义内置标签
原文地址：https://www.cnblogs.com/ye-hcj/p/10352274.html