1. HTML import
如下
上面的代码,一眼就能看出语义。
如果将<share-buttons>元素的样式与脚本,封装在一个 HTML 文件share-buttons.html之中,这个元素就可以复用了。
使用的时候,先引入share-buttons.html。
<linkrel="import"href="share-buttons.html">
然后就可以在网页中使用了。HTML Imports 是一个非常新的技术以至于目前只有 Chrome 31 及以上才支持。
2. Custom Elements 标准
Custom Elements 标准对自定义元素的名字做了限制。
"自定义元素的名字必须包含一个破折号(-)所以<x-tags>、<my-element>和<my-awesome-app>都是正确的名字,而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。"
注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。
Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class语法。
上面代码中,原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class。
这个class使用get和set方法定义 Custom Element 的某个属性。
如此网页中就可以插入<my-element>
处理脚本即可