web components

CovComment是一个基于web components技术和leancloud引擎开发的免登录静态博客评论插件，web components赋予插件极其简单的使用体验和集成。可以在任何类型的博客中轻松集成。 仓库地址：https://github.com/YES-Lee/cov-comment 特性 无需登录即可评论 集成简单，可集成任何类型网站 支持markdown 使用gravatar头像 使用 引入插件 下载releases中的cov-comment-{version}.min.js文件 在项目中使用script标签引入，如：<script src="path/to/cov-comment-1.0.0.min.js" 注册 leancloud 进入leancloud，注册账户登录后，创建应用，选择开发版。 创建成功之后进入应用设置面板，找到“应用 keys”，复制里面的appId和appKey。 添加插件代码 在需要放置评论插件的地方，加入如下代码： <cov-comment appid="leancloud的appId" appkey="leancloud的appKey" pageSize="10" placeholder="来两句吧～" ></cov-comment> 插件参数 名称 类型 是否必填 默认值 说明 appid string 是 leancloud 的应用 appId appKey string 是 leancloud 的应用 appKey pageSize number 否 10 每页评论数量 placeholder string 否 评论一下～ 评论框占位符 License The MIT License (MIT) Copyright (c) 2020 Johnson

web-components是一个比较新的开发技术，但组件化思想已经实际应用了很长时间，代表性的组件话框架有vue, react等。web-components可以直接使用原生HTML和Javascript来封装通用的 web 组件，其拥有简单直接、无任何依赖等特点，是 web 前端开发的一个强有力的技术。 文章前半部分讲web-components相关接口，最后有一个进度条组件实例，点击这里可直接跳转。 Web-Components API Web-Components API有三个核心部分，分别是：Custom elements, Shadow DOM, HTML templates。 Custom elements custom elements顾名思义，允许我们自定义通用的 HTML 标签，可以是一个包含特定功能如：日历、时间显示、进度条等。 创建自定义元素 使用自定义元素，必须先使用customElements.define(name, constructor, options)方法注册元素后才能使用，参数分别为元素名称，元素构造函数，选项（可选）。自定义元素名称不能是单个字母。 生命周期 自定义元素生命周期有 4 个回调函数： connectedCallback：当 custom element 首次被插入文档 DOM 时调用。 disconnectedCallback：当 custom element 从文档 DOM 中删除时调用。 adoptedCallback：当 custom element 被移动时调用。 attributeChangedCallback：当 custom element 增加、删除、修改自身属性时调用。 Shadow DOM 通常情况下，我们封装 web 组件的时候，需要将组件内部的样式封装进去，同时也要避免被外部样式干扰。Shadow DOM是隐藏在一个 DOM 节点里面的节点树，主要特点就是于外部 DOM 树隔离，使组件维护成本大大降低。Shadow DOM并不是新鲜玩意儿，而是浏览器内部 API 实现，我们常用的一些标签如带控制按钮的video标签，其内部就是一个Shadow DOM树。 创建 Shadow DOM Shadow DOM有几个核心概念： Shadow host: 一个常规 DOM 节点，Shadow DOM 会被添加到这个节点上。 Shadow tree: Shadow DOM 内部的 DOM 树。 shadow root: Shadow tree的根节点。 Shadow root: Shadow tree 的根节点。 Shadow boundary: Shadow DOM 结束的地方，也是常规 DOM 开始的地方。 创建Shadow DOM需要用到attachShadow({ mode: 'open' })方法，参数中mode的取值有两个：open, closed，用来配置是否可以从外部获取shadow tree。该函数返回一个Shadow Root。...