组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望。 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements)。
![67b9282ee963284c8218b05f7e67a3ac.png](https://img-blog.csdnimg.cn/img_convert/67b9282ee963284c8218b05f7e67a3ac.png)
一、浏览器处理
我们一般都使用标准的 HTML 元素。
Hello World
上面代码中,
就是标准的 HTML 元素。
如果使用非标准的自定义元素,会有什么结果?
Hello World
上面代码中,就是非标准元素,浏览器不认识它。这段代码的运行结果是,浏览器照常显示Hello World,这说明浏览器并没有过滤这个元素。
![843a8b5c66070013359006619510bac3.png](https://img-blog.csdnimg.cn/img_convert/843a8b5c66070013359006619510bac3.png)
现在,为自定义元素加上样式。
greeting { display: block; font-size: 36px; color: red;}
运行结果如下。
![7d98d1689cfaa1a18ec6df1f8bfdce9f.png](https://img-blog.csdnimg.cn/img_convert/7d98d1689cfaa1a18ec6df1f8bfdce9f.png)
接着,使用脚本操作这个元素。
function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn);}function greetingHandler(element) { element.innerHTML = '你好,世界';} customTag('greeting', greetingHandler);
运行结果如下。
![74d9382e21fea4c479a8c47fa00bcd98.png](https://img-blog.csdnimg.cn/img_convert/74d9382e21fea4c479a8c47fa00bcd98.png)
这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入 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 // truetabs instanceof HTMLElement // true
上面代码中,tabs是一个自定义元素,同时继承了HTMLUnknownElement和HTMLElement接口。
获取方式:
1.在你手机的右上角有【关注】选项,或点击我的头像,点击关注!(关注我)
2.关注后,手机客户端点击我的主页面,右上角有私信,请私信发我:编程
电脑已经设置好了关键词自动回复,自动领取就好了!这几天上万个消息,真的回复不过来,所以回复的时候请注意关键词!
其实做为一个开发者,有一个学习的氛围跟一个交流圈子特别重要这里请私信我“编程”不管你是小白还是大牛欢迎入住大家一起交流成长。小编会在里面不定期分享干货源码,包括我精心整理的一份零基础教程。欢迎各位感兴趣的的小伙伴。
学习思路:
![42a455d7ea58f061679eb306b47c24a6.png](https://img-blog.csdnimg.cn/img_convert/42a455d7ea58f061679eb306b47c24a6.png)
二、HTML import
有了自定义元素,就可以写出语义性非常好的 HTML 代码。
微博 微信
上面的代码,一眼就能看出语义。
如果将元素的样式与脚本,封装在一个 HTML 文件share-buttons.html之中,这个元素就可以复用了。
使用的时候,先引入share-buttons.html。
然后,就可以在网页中使用了。
Title
... ...
HTML imports 的更多用法可以参考教程(1,2)。目前只有 Chrome 浏览器支持这个语法。
![5dc139c69b79fb9c4f30601ebe289290.gif](https://img-blog.csdnimg.cn/img_convert/5dc139c69b79fb9c4f30601ebe289290.gif)
三、Custom Elements 标准
HTML5 标准规定了自定义元素是合法的。然后,W3C 就为自定义元素制定了一个单独的 Custom Elements 标准。
![ebc25822a098be2f3d464a66c8a28689.png](https://img-blog.csdnimg.cn/img_convert/ebc25822a098be2f3d464a66c8a28689.png)
它与其他三个标准放在一起—- HTML Imports,HTML Template、Shadow DOM—-统称为 Web Components 规范。目前,这个规范只有 Chrome 浏览器支持。
Custom Elements 标准对自定义元素的名字做了限制。
“自定义元素的名字必须包含一个破折号(-)所以、和都是正确的名字,而和是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。”
注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。
var xTabs = document.createElement('x-tabs');xTabs instanceof HTMLUnknownElement // falsexTabs instanceof HTMLElement // true
Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class语法。
// 定义一个 class MyElement extends HTMLElement {...}window.customElements.define('my-element', MyElement);
上面代码中,原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class。
这个class使用get和set方法定义 Custom Element 的某个属性。
class MyElement extends HTMLElement { get content() { return this.getAttribute('content'); } set content(val) { this.setAttribute('content', val); }}
有了这个定义,网页之中就可以插入了。
Hello
处理脚本如下。
function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn);}function myElementHandler(element) { element.textConent = element.content;}customTag('my-element', myElementHandler);
运行结果如下。
![a26e5a6af0cedf3be216fc869d09a79d.png](https://img-blog.csdnimg.cn/img_convert/a26e5a6af0cedf3be216fc869d09a79d.png)
ES6 Class 的一个好处是,可以很容易地写出继承类。
class MyNewElement extends MyElement { // ...}customElements.define('my-new-element', MyNewElement);
今天的教程就到这里,更多用法请参考谷歌的官方教程。
![04e84d970ddf74d51011af5a23481e3c.png](https://img-blog.csdnimg.cn/img_convert/04e84d970ddf74d51011af5a23481e3c.png)