HTML 自定义元素教程
组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望。
本文就介绍 HTML 组件的基础知识:自定义元素(custom elements)。
文章结尾还有一则 React 培训消息(含 React Native),欢迎关注。
一、浏览器处理
我们一般都使用标准的 HTML 元素。
<p>Hello World</p>
上面代码中,<p>
就是标准的 HTML 元素。
如果使用非标准的自定义元素,会有什么结果?
<greeting>Hello World</greeting>
上面代码中,<greeting>
就是非标准元素,浏览器不认识它。这段代码的运行结果是,浏览器照常显示Hello World
,这说明浏览器并没有过滤这个元素。
现在,为自定义元素加上样式。
greeting {
display: block;
font-size: 36px;
color: red;
}
运行结果如下。
接着,使用脚本操作这个元素。
function customTag(tagName, fn){
Array
.from(document.getElementsByTagName(tagName))
.forEach(fn);
} function greetingHandler(element) {
element.innerHTML = '你好,世界';
} customTag('greeting', greetingHandler);
运行结果如下。
这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入 HTML5 标准的。
"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."
上面这段话的意思是,浏览器必须将自定义元素保留在 DOM 之中,但不会任何语义。除此之外,自定义元素与标准元素都一致。
事实上,浏览器提供了一个HTMLUnknownElement
对象,所有自定义元素都是该对象的实例。
var tabs = document.createElement('tabs'); tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true
上面代码中,tabs
是一个自定义元素,同时继承了HTMLUnknownElement
和HTMLElement
接口。
二、HTML import
有了自定义元素,就可以写出语义性非常好的 HTML 代码。
<share-buttons>
<social-button type="weibo">
<a href="...">微博</a>
</social-button>
<social-button type="weixin">
<a href="...">微信</a>
</social-button>
</share-buttons>
上面的代码,一眼就能看出语义。
如果将<share-buttons>
元素的样式与脚本,封装在一个 HTML 文件share-buttons.html
之中,这个元素就可以复用了。
使用的时候,先引入share-buttons.html
。
<link rel="import" href="share-buttons.html">
然后,就可以在网页中使用<share-buttons>
了。
<article>
<h1>Title</h1>
<share-buttons/>
... ...
</article>
HTML imports 的更多用法可以参考教程(1,2)。目前只有 Chrome 浏览器支持这个语法。
三、Custom Elements 标准
HTML5 标准规定了自定义元素是合法的。然后,W3C 就为自定义元素制定了一个单独的 Custom Elements 标准。
它与其他三个标准放在一起---- HTML Imports,HTML Template、Shadow DOM----统称为 Web Components 规范。目前,这个规范只有 Chrome 浏览器支持。
Custom Elements 标准对自定义元素的名字做了限制。
"自定义元素的名字必须包含一个破折号(
-
)所以<x-tags>
、<my-element>
和<my-awesome-app>
都是正确的名字,而<tabs>
和<foo_bar>
是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。"
注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement
的实例了。
var xTabs = document.createElement('x-tabs'); xTabs instanceof HTMLUnknownElement // false
xTabs instanceof HTMLElement // true
Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class
语法。
// 定义一个 <my-element></my-element>
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
上面代码中,原生的window.customElements
对象的define
方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class
。
这个class
使用get
和set
方法定义 Custom Element 的某个属性。
class MyElement extends HTMLElement {
get content() {
return this.getAttribute('content');
} set content(val) {
this.setAttribute('content', val);
}
}
有了这个定义,网页之中就可以插入<my-element>
了。
<my-element content="Custom Element">
Hello
</my-element>
处理脚本如下。
function customTag(tagName, fn){
Array
.from(document.getElementsByTagName(tagName))
.forEach(fn);
} function myElementHandler(element) {
element.textConent = element.content;
} customTag('my-element', myElementHandler);
运行结果如下。
ES6 Class 的一个好处是,可以很容易地写出继承类。
class MyNewElement extends MyElement {
// ...
} customElements.define('my-new-element', MyNewElement);
今天的教程就到这里,更多用法请参考谷歌的官方教程。
四、参考链接
- John Negoita, Extending HTML by Creating Custom Tags
- StackOverflow, Are custom elements valid HTML5?
- Eric Bidelman, Custom Elements v1: Reusable Web Components
(正文完)转载自:http://www.ruanyifeng.com/blog/2017/06/custom-elements.html(阮一峰)
HTML 自定义元素教程的更多相关文章
- 前端组件化Polymer入门教程(4)——自定义元素
除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...
- Android自定义视图教程
Android自定义视图教程 Android的UI元素都是基于View(屏幕中单个元素)和ViewGroup(元素的集合),Android有许多自带的组件和布局,比如Button.TextView.R ...
- 自定义元素–为你的HTML代码定义新元素
注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述
Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...
- 自定义元素 – 在 HTML 中定义新元素
本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...
- angularJS 自定义元素和属性
创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...
- vue与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...
- 自定义元素 v1:可重用网络组件
google文档 https://developers.google.cn/web/fundamentals/web-components/customelements 兼容性 https://can ...
随机推荐
- PHP中输出字符串(echo,print,printf,print_r和var_dump)的区别【转载】
php中常见的输出语句 echo()可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用. prin ...
- 转 笔记本无线和有线的MAC地址修改
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xueqiang03/article/details/80741734无线网卡的mac地址在出厂时就被 ...
- MySQL全面优化,速度飞起来!
Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:惨绿少年 https://www.cnblogs.com/clsn/p/8214048.html 在进行MySQL的优 ...
- org-mode记录总结
org-mode记录总结 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} cod ...
- ant的安装和使用
1.ant的安装 1.1 添加环境变量:ANT_HOME=D:\software\ant\apache-ant-1.10.1 在path中添加:%ANT_HOME%\bin 1.2 测试是否安装成功 ...
- linux 之文件重命名
没有专门的重命名 命令 用 mv a b 就可以重命名了 mv :move 移动文件(延伸功能:重命名,linux系统没有专门的重命名命令) 基本格式: 移动文件:mv 文件名 移动目的地文件名 重命 ...
- 【CSS】div的背景图完整图片覆盖
最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...
- 数据库常用SQL语句
显示所有的数据库 show databases; 新建数据库 create database if not exists 数据库名 default character set = 'utf8'; 删 ...
- Linux防火墙设置——iptables
防火墙用于监控往来流量,并根据用户定义的规则来过滤数据包以保证安全.iptables是Linux下设置防火墙规则的常用工具,它可以让你设置.维护以及查看防火墙的规则表.你可以定义多个表,每个表可以包含 ...
- python 对redis 键值对的操作
我们可以将Redis中的Hashes类型看成具有String Key和String Value的键值对容器.类似python中的dict,javascript的jaon,java 的map,每一个Ha ...