专栏首页阮一峰的网络日志HTML 自定义元素教程

HTML 自定义元素教程

组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望。

本文就介绍 HTML 组件的基础知识:自定义元素(custom elements)。

文章结尾还有一则 React 培训消息(含 React Native),欢迎关注。

一、浏览器处理

我们一般都使用标准的 HTML 元素。

<p>Hello World</p>

上面代码中,<p>就是标准的 HTML 元素。

如果使用非标准的自定义元素,会有什么结果?

<greeting>Hello World</greeting>

上面代码中,<greeting>就是非标准元素,浏览器不认识它。这段代码的运行结果是,浏览器照常显示Hello World,这说明浏览器并没有过滤这个元素。

现在,为自定义元素加上样式。

greeting { display: block; font-size: 36px; color: red; }

运行结果如下。

接着,使用脚本操作这个元素。

function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn); } function greetingHandler(element) { element.innerHTML = '你好,世界'; } customTag('greeting', greetingHandler);

运行结果如下。

这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入 HTML5 标准的。

"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."

上面这段话的意思是,浏览器必须将自定义元素保留在 DOM 之中,但不会任何语义。除此之外,自定义元素与标准元素都一致。

事实上,浏览器提供了一个HTMLUnknownElement对象,所有自定义元素都是该对象的实例。

var tabs = document.createElement('tabs'); tabs instanceof HTMLUnknownElement // true tabs instanceof HTMLElement // true

上面代码中,tabs是一个自定义元素,同时继承了HTMLUnknownElementHTMLElement接口。

二、HTML import

有了自定义元素,就可以写出语义性非常好的 HTML 代码。

<share-buttons> <social-button type="weibo"> <a href="...">微博</a> </social-button> <social-button type="weixin"> <a href="...">微信</a> </social-button> </share-buttons>

上面的代码,一眼就能看出语义。

如果将<share-buttons>元素的样式与脚本,封装在一个 HTML 文件share-buttons.html之中,这个元素就可以复用了。

使用的时候,先引入share-buttons.html

<link rel="import" href="share-buttons.html">

然后,就可以在网页中使用<share-buttons>了。

<article> <h1>Title</h1> <share-buttons/> ... ... </article>

HTML imports 的更多用法可以参考教程(12)。目前只有 Chrome 浏览器支持这个语法。

三、Custom Elements 标准

HTML5 标准规定了自定义元素是合法的。然后,W3C 就为自定义元素制定了一个单独的 Custom Elements 标准

它与其他三个标准放在一起---- HTML Imports,HTML Template、Shadow DOM----统称为 Web Components 规范。目前,这个规范只有 Chrome 浏览器支持

Custom Elements 标准对自定义元素的名字做了限制

"自定义元素的名字必须包含一个破折号(-)所以<x-tags><my-element><my-awesome-app>都是正确的名字,而<tabs><foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。"

注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。

var xTabs = document.createElement('x-tabs'); xTabs instanceof HTMLUnknownElement // false xTabs instanceof HTMLElement // true

Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class语法

// 定义一个 <my-element></my-element> class MyElement extends HTMLElement {...} window.customElements.define('my-element', MyElement);

上面代码中,原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class

这个class使用getset方法定义 Custom Element 的某个属性。

class MyElement extends HTMLElement { get content() { return this.getAttribute('content'); } set content(val) { this.setAttribute('content', val); } }

有了这个定义,网页之中就可以插入<my-element>了。

<my-element content="Custom Element"> Hello </my-element>

处理脚本如下。

function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn); } function myElementHandler(element) { element.textConent = element.content; } customTag('my-element', myElementHandler);

运行结果如下。

ES6 Class 的一个好处是,可以很容易地写出继承类。

class MyNewElement extends MyElement { // ... } customElements.define('my-new-element', MyNewElement);

今天的教程就到这里,更多用法请参考谷歌的官方教程

四、参考链接

(正文完)

==============================

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery设计思想

    jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

    ruanyf
  • jQuery最佳实践

    上周,我整理了《jQuery设计思想》。 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQue...

    ruanyf
  • GitHub Actions 教程:定时发送天气邮件

    2019年11月,GitHub 正式开放了 GitHub Actions 这个功能,现在不用申请就能使用。

    ruanyf
  • HTML5自定义标签

    上面代码中,<greeting>就是非标准元素,浏览器不认识它。这段代码的运行结果是,浏览器照常显示Hello World,这说明浏览器并没有过滤这个元素。

    javascript.shop
  • CSS 实用手册

    (1). 内联方式,又称为行内样式,将样式定义在某 html 元素中(style 属性中)

    越陌度阡
  • 简析Linux主要应用领域及范围

    Linux操作系统主要有以下三大应用领域: 1. Linux作为企业级服务器的应用 Linux系统可以为企业架构WWW服务器、数据库服务器、负载均衡服务器、邮件...

    企鹅号小编
  • BSL编程语言 —— 系统化程序设计

    如果你第一次使用DrRacket,打开后需要选择Beginning Student Language (BSL)

    主机优惠
  • python爬虫伪装请求头---fake-useragent

    在编写爬虫进行网页数据的时候,大多数情况下,需要在请求是增加请求头,下面介绍一个python下非常好用的伪装请求头的库:fake-useragent,具体使用说...

    forxtz
  • Android 架构师研发技术进阶之路:不同阶段需要掌握的那些技术及软技能

    移动研发火热不停,越来越多人开始学习android开发。但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容。市...

    Android技术干货分享
  • 机器学习笔记之jupyter自动代码补全

    在WIndows开始菜单中找到Anaconda,打开了Anaconda Prompt,

    Jetpropelledsnake21

扫码关注云+社区

领取腾讯云代金券