使用原生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自定义内置标签的更多相关文章

  1. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  2. JSP标签：jsp内置标签、jstl标签、自定义标签

     一.jsp标签的分类: 1)内置标签(动作标签): 不需要在jsp页面导入标签 2)jstl标签: 需要在jsp页面中导入标签 3)自定义标签 : 开发者自行定义,需要在jsp页面导入标签    1 ...

  3. ThinkPHP中的内置标签

    ThinkPHP中的内置标签 1.内置标签分类 闭合标签 <tag></tag> 开放标签 <tag /> 2.包含文件标签 主要功能:实现对文件的包含(类似于re ...

  4. thinkphp5内置标签

    thinkphp5内置标签 知道内置标签怎么用,查手册的时候好查 却功能的时候在里面找着来用 内置标签一览 内置标签 变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板 ...

  5. Hexo 添加自定义的内置标签

    灵感 想设计一个记录自已骑行的页面,显示时间.地点.路线图等信息.方便以后做一些留念.定位想实现下面类似的效果.参考:<特效>      实现方案也比较简单,反键查看源码.直接Copy,在 ...

  6. ThinkPHP 模版中的内置标签

    内置标签就是模版引擎提供的一组可以完成控制.循环和判断功能的类似HTML语法的标签.   一.判断比较:   1.if标签进行条件判断 //if语句的完整格式 <if condition=&qu ...

  7. js中内置有对象

    statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...

  8. django中模板变量与内置标签以及过滤器

    本文参考 官方文档 . 一  模板变量 格式: {{ variable_name }} variable_name   命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...

  9. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

随机推荐

  1. 分享知识-快乐自己：都说新的Arraylist 扩容是(1.5倍+1) 看了1.8的源代码发现不是这么回事

    都说新的Arraylist 扩容是(1.5倍+1) 看了1.8的源代码发现不是这么回事 就用下面这段代码在jdk的三个版本运行看了下效果: import java.lang.reflect.Field ...

  2. Confluence 6 测试电子邮件设置

    一个 Confluence 的管理员可以通过下面的步骤测试电子邮件服务器的配置: 按照上面的步骤中描述得方法设置一个电子邮件服务器. 单击 发送测试邮件(Send Test Email)来检查你设置的 ...

  3. while for if ---语句和编写计划任务

    关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...

  4. 【scala】匿名函数和闭包

    函数的类型和值 Scala是一种纯面向对象的语言,每个值都是对象.Java是一种不全面向对象的语言. Scala也是一种函数式语言,其函数也能当成值来使用.Java则是指令试编程. 但是Scala同时 ...

  5. SQL Server中解决死锁的新方法介绍

    SQL Server中解决死锁的新方法介绍 数据库操作的死锁是不可避免的,本文并不打算讨论死锁如何产生,重点在于解决死锁,通过SQL Server 2005, 现在似乎有了一种新的解决办法. 将下面的 ...

  6. LeetCode OJ：Remove Duplicates from Sorted Array II（移除数组中的重复元素II）

    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...

  7. TCPL学习毕节：第六章hash表

    对于P126的哈希表构成: struct nlist *install(char *name, char *defn) { struct nlist *np; unsigned hashval; if ...

  8. 遮罩效果 css3

    CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...

  9. 简单使用JDOM解析XML

    原文:http://liuwentao.iteye.com/blog/59978 使用JDOM解析XML一.前言JDOM是Breet Mclaughlin和Jason Hunter两大Java高手的创 ...

  10. macOS Ruby版本需要升级到2.2.2以上

    在安装 Ruby on Rails 时遇到问题,提示依赖 ruby 2.2.2 或更高的版本. ERROR: Error installing rails: activesupport require ...