使用原生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. 支付宝VIE的罪与罚

    http://tech.ifeng.com/special/tusimple/alibaba/#_www_dt2   雅虎的杨致远.软银的孙正义,都曾是马云阿里巴巴创业路上的贵人,也都曾是相互信任的朋 ...

  2. CC国内厂商现状

    (1)阿里云的产品 CC攻击 攻击者攻击服务器的认证页面.登录页面.游戏论坛等.还是用饭馆的例子,CC攻击相当于,坏人霸占收银台结账.霸占服务员点菜,导致正常的客人无法享受到服务. 游戏盾如何防御CC ...

  3. json结构更改的方法 把date有数据的分类

    data=[ { "content": "如何走进智障儿童的内心", "title": "如何走进智障儿童的内心", & ...

  4. TCP与UDP（实时通讯）

    1.TCP使用 导入AsyncSocket资源文件夹,此文件是arc混编,加入库文件,如下图: #import "ViewController.h" #import "A ...

  5. scrapy 碎片

    1.启动命令 2.目录结构 3.文件说明 4.架构图示 5.代码流程 参考资料: http://www.cnblogs.com/yangxt90/articles/9021530.html http: ...

  6. 5.linux目录结构介绍

    目录: 1.linux系统的目录结构特点?为何会形成这样的目录结构? 2.基本目录内容详解! 3.重要目录详解! 1.linux系统的目录结构特点? A.Linux系统的目录结构是一棵倒挂的大树,”/ ...

  7. Ubuntu下安装为知笔记

    之前在Windows下用的是有道云笔记,但是后来开始习惯使用Linux开发,有道云官方并没有提供Ubuntu的版本,所以权衡之下,选择了为知笔记,安装步骤: sudo add-apt-reposito ...

  8. Java连接Mysql的基本用法

    Java连接数据库(以MySQL为例)2007-04-05 02:23           这篇文章主要以MySQL为例讲下Java如何连接到数据库的. 当然,首先要安装有JDK(一般是JDK1.5. ...

  9. bzoj 4465 游戏中的学问

    Written with StackEdit. Description 大家应该都见过很多人手拉手围着篝火跳舞的场景吧?一般情况下,大家手 拉手跳舞总是会围成一个大圈,每个人的左手拉着旁边朋友的右手, ...

  10. js对象原型链

    JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象.这个对象的所有属性和方法,都会被构造函数的所拥有. 这也就意味着,我们可以把所有对象实例需要共享的属性和方 ...