美文网首页
HTML自定义标签

HTML自定义标签

作者: yuanjiex | 来源:发表于2018-08-01 09:45 被阅读0次

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>

处理脚本即可

相关文章

  • HTML笔记--列表标签

    HTML笔记--列表标签 标签(空格分隔): HTML 列表标签: 定义列表:带缩进的列表如这种样式的: 自定义...

  • JavaWeb之自定义标签

    JSP标签 JSP脚本不够方便,与HTML代码混杂,因此采用具有和HTML标签类似的JSP自定义标签 步骤: 编写...

  • 常用的DOCTYPE

    XML用来传输和存储数据 HTML用来显示数据 XML没有预定义标签,可以自定义标签。而HTML只有预定义标签以提...

  • 前段学习笔记三

    html部分标签 列表标签:分为有序列表( )和无序列表( )和自定义列表( ) 表格标签t...

  • beetl 前端

    1.自定义标签和html标签 模版基础配置。文件位置:/org/beetl/core/beetl-default....

  • 组件、父子间的通信

    自定义的控件(自定义的标签),能够封装可重用的代码,可扩展HTML标签功能 全局组件 不同作用域内均可使用 定义...

  • 原生JS与jQuery自定义属性的操作

    一、自定义属性:   首先我们来弄清楚什么是自定义属性:   由html的基础知识我们知道,html标签是不存在a...

  • HTML自定义标签

    1. HTML import 如下 上面的代码,一眼就能看出语义。 如果将 元素的样式与脚本,封装在一个 HTML...

  • 17.4JSTL标签库之核心标签

    一、JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的。使用JSLT...

  • 浅谈Vue.js官方文档

    打个照面: 自定义标签 嵌入原生HTML标签中去: 完了之后调用: 每个 Vue 应用都是通过用 Vue 函数创...

网友评论

      本文标题:HTML自定义标签

      本文链接:https://www.haomeiwen.com/subject/kgklvftx.html