HTML自定义标签

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>


处理脚本即可

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,273评论 19 139
  • 这篇文章在介绍官网的同时使用了比较多的脚本示例,示例里遇到的问题有部分在本篇文章进行了解释,还有一篇文章专门记录了...
    顾顾314阅读 14,432评论 3 32
  • 一直玫瑰入你眼眸 一壶烈酒融入你喉 一缕清风伴你长久 两对鸳鸯戏水中 两声爱你表心意 云白如你的肌肤 风温柔如你笑...
    情书小王子阅读 4,057评论 0 1
  • 或许,我们更喜欢安静,不过我们却追逐着喧嚣,我们靠近喧嚣的世界,悲剧,喜剧,好像剧本一样,只是差一个演员罢了。 我...
    小时候就长大了耶阅读 2,548评论 0 0
  • 可能标题有点古怪,也可能有些矛盾,其实,生活中有谁不是呢,当你喜欢一个人到了某个程度的时候,你会发现,他的许多...
    郑亚飞阅读 2,823评论 0 1

友情链接更多精彩内容