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