标签：extend title .text script xtend inner info dev function
效果图
代码
<!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>标签：extend title .text script xtend inner info dev function
原文地址：https://www.cnblogs.com/ye-hcj/p/10352274.html
