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 ...
随机推荐
- 好947 Mybatis 配置resultMap 带參数查询Map 注意selectOne数据库返回结果一条数据库 否则会报错
//TMD 写几个demo 还有大站採集 <a target=_blank href="http://hao947.com/" target="_blank&quo ...
- 如何在Web项目中配置Spring MVC
要使用Spring MVC需要在Web项目配置文件中web.xml中配置Spring MVC的前端控制器DispatchServlet <servlet> <servlet-name ...
- svn - Subversion 命令行客户端工具
SYNOPSIS 总览 svn command [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版本的文件和目录 (通常是源代码),保存一 ...
- Java中this的基础用法
update on 2019-07-07 在Java核心技术一书中看到调用方法时this作为隐式参数传入的. 突然间许多问题都懂了 比如:方法的多态 父类变量指向子类对象的引用 对象变量指向的实际类型 ...
- struct解决socket黏包问题 (指令传输)
服务端代码如下 import struct import subprocess import socket server = socket.socket() server.bind(()) serve ...
- Codeforces 1182D Complete Mirror 树的重心乱搞 / 树的直径 / 拓扑排序
题意:给你一颗树,问这颗树是否存在一个根,使得对于任意两点,如果它们到根的距离相同,那么它们的度必须相等. 思路1:树的重心乱搞 根据样例发现,树的重心可能是答案,所以我们可以先判断一下树的重心可不可 ...
- java中this和super关键字的作用
this是对象内部指代自身的引用,同时也是解决成员变量和局部变量同名问题:this可以调用成员变量,不能调用局部变量:this也可以调用成员方法,但是在普通方法中可以省略this,在构造方法中不允许省 ...
- 57. Collections(list的工具类)、Arrays(数组的工具类)
List集合的工具类(Collections): 注意:Collection是单列集合的根接口 Collections是操作集合对象的工具类 1.对list集合排序: sort(List) 根据自然 ...
- QDomDocument::clear()的调用,会导致关闭程序时崩溃!!!
//读一份xml前,先清理m_Doc[QDomDocument] bool XmlIO::xmlRead(QString &errmsg) { m_mutex.lock(); // m_Doc ...
- three.js低版本添加文字(如71版本)
研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...