组件是 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是一个自定义元素,同时继承了HTMLUnknownElementHTMLElement接口。

二、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 的更多用法可以参考教程(12)。目前只有 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使用getset方法定义 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);

今天的教程就到这里,更多用法请参考谷歌的官方教程

四、参考链接

(正文完)转载自:http://www.ruanyifeng.com/blog/2017/06/custom-elements.html(阮一峰)

HTML 自定义元素教程的更多相关文章

  1. 前端组件化Polymer入门教程(4)——自定义元素

    除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式. template.html <link rel="import" ...

  2. Android自定义视图教程

    Android自定义视图教程 Android的UI元素都是基于View(屏幕中单个元素)和ViewGroup(元素的集合),Android有许多自带的组件和布局,比如Button.TextView.R ...

  3. 自定义元素–为你的HTML代码定义新元素

    注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...

  4. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  5. KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述

    Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...

  6. 自定义元素 – 在 HTML 中定义新元素

    本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...

  7. angularJS 自定义元素和属性

    创造自定义元素和属性的方法是:directive('string',function(){ return{}; }); ①函数接收两个参数:一个字符串(指令的名字),一个函数: ②回调函数必须返回一个 ...

  8. vue与自定义元素的关系

    你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...

  9. 自定义元素 v1:可重用网络组件

    google文档 https://developers.google.cn/web/fundamentals/web-components/customelements 兼容性 https://can ...

随机推荐

  1. 好947 Mybatis 配置resultMap 带參数查询Map 注意selectOne数据库返回结果一条数据库 否则会报错

    //TMD 写几个demo 还有大站採集 <a target=_blank href="http://hao947.com/" target="_blank&quo ...

  2. 如何在Web项目中配置Spring MVC

    要使用Spring MVC需要在Web项目配置文件中web.xml中配置Spring MVC的前端控制器DispatchServlet <servlet> <servlet-name ...

  3. svn - Subversion 命令行客户端工具

    SYNOPSIS 总览 svn command [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版本的文件和目录 (通常是源代码),保存一 ...

  4. Java中this的基础用法

    update on 2019-07-07 在Java核心技术一书中看到调用方法时this作为隐式参数传入的. 突然间许多问题都懂了 比如:方法的多态 父类变量指向子类对象的引用 对象变量指向的实际类型 ...

  5. struct解决socket黏包问题 (指令传输)

    服务端代码如下 import struct import subprocess import socket server = socket.socket() server.bind(()) serve ...

  6. Codeforces 1182D Complete Mirror 树的重心乱搞 / 树的直径 / 拓扑排序

    题意:给你一颗树,问这颗树是否存在一个根,使得对于任意两点,如果它们到根的距离相同,那么它们的度必须相等. 思路1:树的重心乱搞 根据样例发现,树的重心可能是答案,所以我们可以先判断一下树的重心可不可 ...

  7. java中this和super关键字的作用

    this是对象内部指代自身的引用,同时也是解决成员变量和局部变量同名问题:this可以调用成员变量,不能调用局部变量:this也可以调用成员方法,但是在普通方法中可以省略this,在构造方法中不允许省 ...

  8. 57. Collections(list的工具类)、Arrays(数组的工具类)

    List集合的工具类(Collections): 注意:Collection是单列集合的根接口  Collections是操作集合对象的工具类 1.对list集合排序: sort(List) 根据自然 ...

  9. QDomDocument::clear()的调用,会导致关闭程序时崩溃!!!

    //读一份xml前,先清理m_Doc[QDomDocument] bool XmlIO::xmlRead(QString &errmsg) { m_mutex.lock(); // m_Doc ...

  10. three.js低版本添加文字(如71版本)

    研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...