通用组件的通用DOM标准属性
| 名称 | 描述 | 建议或更多 |
|---|
| accesskey | 定义元素功能快捷键的方式: chrome/windows 环境： Alt + [key], <button accesskey="s"></button> => 快捷键 Alt + s | 会有很多问题，不建议使用 |
| aria-* | 无障碍富网络应用 ARIA 属性 |
| autocapitalize | 一个枚举属性， 用于控制用户输入、编辑文本输入文本是否自动大写医技大写的方式 | 物理键盘输入以及有type属性的input不生效 |
| className | Element.className 获取或设置元素class属性的值 | Element.className="contianer" let elClass = Element.className |
| contenteditable | 枚举属性，描述元素的内容是否可编辑, contenteditable="true/false" | 如可编辑浏览器将元素变为用户可输入，但修改事件无法使用onChange监听 |
| data-* | 自定义全局属性 | |
| dir | 定义文本输入方向: auto:自定义，ltr:从左往右书写的，如中国：“国之根本” , rtl: 从右往左输入的，如阿拉伯等 | |
| draggable | 是否允许浏览器使用原生的拖拽Api | 只支持链接、图片、选中的文字的拖拽，其他拖拽需通过onDragStart等事件监听 |
| enterKeyHint | 指定虚拟键盘上的 entry键的操作方式 | 示例讲解 |
| htmlFor | <label>和<output>的属性， 等同于原生的<label for=""> 的 for 属性 | |
| hidden | [boolean] :隐藏元素 | 浏览器源码： {display: none !important;} |
| id | 不能包含空格，制表符等空白字符 | 标注元素的唯一值, 18.x可以用 useId生成唯一值 例如 :r0: :r1:等 |
| is | 自定义元素的类属性 | chrome v67+ 示例讲解 |
| inputMode | 指定输入时，弹出键盘的类型 | 目前各浏览器兼容性较差 |
| itemProp | 可给 HTML 元素添加属性以 键值对[name]:[value:string|url] 的形式 | |
| lang | 可给 HTML 元素添加语言类型属性 依据 BCP47 | 优先级低于 xml:lang |
| 属性值 | 描述 | 建议或更多 |
|---|
| enter | 插入一个新的行,回车键常用功能 | enterKeyHint="enter" |
| done | input 操作已完成 | enterKeyHint="done" |
| go | 跳转到当前输入的地址 | enterKeyHint="go" |
| next | 跳转到下一个表单 | enterKeyHint="next" |
| previous | 跳转到上一个表单 | enterKeyHint="previous" |
| search | 搜索当前输入的内容 | enterKeyHint="search" |
| send | 发送当前输入的内容到目标 | <a href="..." enterKeyHint="send">发送</a> |
// enter
const el = document.getElementById('container-1')
el.enterKeyHint = "enter"
// html
...
<div contenteditable="">
<p>这里开始输入</p>
<p is="word-count" style="background-color: lightblue;height: 60px;color:black;"></p>
</div>
// js
// HTMLParagraphElement : Element 的api 用于定义 <p>元素的类
class WordCount extends HTMLParagraphElement {
constructor() {
super();
// 获取父节点中词的个数
const wcParent = this.parentNode;
function countWords(node){
const text = node.innerText || node.textContent;
return text.trim().split(/\s+/g).filter(a => a.trim().length > 0).length;
}
const count = `Words: ${countWords(wcParent)}`;
// 创建一个 shadowRoot 详见 **[shadowRoot](#https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot)**
const shadow = this.attachShadow({mode: 'open'});
const text = document.createElement('span');
text.textContent = count;
// 将包含个数的元素插入shadow
shadow.appendChild(text);
// 当父节点的字发生变化时重新计算词的个数
setInterval(function() {
const count = `Words: ${countWords(wcParent)}`;
text.textContent = count;
}, 200);
}
}
// 将类与 is 关联 'word-count' <=> WordCount
customElements.define('word-count', WordCount, { extends: 'p' });