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>

处理脚本即可

作者：yuanjiex
链接：https://www.jianshu.com/p/22c2a45db499
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。