专栏名称: 前端大全

分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

HTML 自定义元素教程

前端大全 · 公众号 · 前端 · 2017-06-28 20:20

正文

（点击上方公众号，可快速关注）

作者：阮一峰

www.ruanyifeng.com/blog/2017/06/custom-elements.html

如有好文章投稿，请点击 → 这里了解详情

组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。

本文就介绍 HTML 组件的基础知识：自定义元素（custom elements）。

一、浏览器处理

我们一般都使用标准的 HTML 元素。

Hello World

上面代码中，

就是标准的 HTML 元素。

如果使用非标准的自定义元素，会有什么结果？

Hello World

上面代码中，就是非标准元素，浏览器不认识它。这段代码的运行结果是，浏览器照常显示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 代码。

type = "weibo" >

href = "..." > 微博

type = "weixin" >

href = "..." > 微信

上面的代码，一眼就能看出语义。

如果将元素的样式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就可以复用了。

使用的时候，先引入share-buttons.html。

然后，就可以在网页中使用了。

Title

... ...

HTML imports 的更多用法可以参考教程（1，2）。目前只有 Chrome 浏览器支持这个语法。

三、Custom Elements 标准

HTML5 标准规定了自定义元素是合法的。然后，W3C 就为自定义元素制定了一个单独的 Custom Elements 标准。

它与其他三个标准放在一起—- HTML Imports，HTML Template、Shadow DOM—-统称为 Web Components 规范。目前，这个规范只有 Chrome 浏览器支持。

Custom Elements 标准对自定义元素的名字做了限制。

“自定义元素的名字必须包含一个破折号（-）所以、和都是正确的名字，而和是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素。”

注意，一旦名字之中使用了破折号，自定义元素就不是HTMLUnknownElement的实例了。

var xTabs = document . createElement ( 'x-tabs' );

xTabs

HTML 自定义元素教程

正文

Title

... ...

请到「今天看啥」查看全文

HTML 自定义元素教程

正文

Title ... ...

请到「今天看啥」查看全文

Title

... ...