微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

HTML 自定义元素教程

2017-06-28 20:20 前端大全

(点击上方公众号,可快速关注)

作者:阮一峰 

www.ruanyifeng.com/blog/2017/06/custom-elements.html

如有好文章投稿,请点击 → 这里了解详情


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


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



一、浏览器处理


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


<p>Hello World</p>


上面代码中,


就是标准的 HTML 元素。


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


<greeting>Hello World</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是一个自定义元素,同时继承了HTMLUnknownElement和HTMLElement接口。


二、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>


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


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


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


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


然后,就可以在网页中使用了。


<article>

  <h1>Title</h1>

  <share-buttons/>

  ... ...

</article>


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


三、Custom Elements 标准


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


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



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


“自定义元素的名字必须包含一个破折号(-)所以、和都是正确的名字,而和是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。”



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


var xTabs = document.createElement('x-tabs');

 

xTabs instanceof HTMLUnknownElement // false

xTabs 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);

  }

}


有了这个定义,网页之中就可以插入了。


<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);


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


四、参考链接


  • John Negoita, Extending HTML by Creating Custom Tags

  • StackOverflow, Are custom elements valid HTML5?

  • Eric Bidelman, Custom Elements v1: Reusable Web Components



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 刨根问底HTTP和WebSocket协议 JS 从0开始构思表情插件 React 如何优雅地写单页面应用? 前端工程师面试题汇总 一名 40 岁“老”程序员的反思
猜您喜欢 还记得昔日浏览器霸主 IE 吗?微软已经抛弃了它 Python数据分析笔记:聚类算法之K均值 《S.》:读者的梦想,图书馆员的梦魇 #小知识#POST数据获取三板斧:POST,HTTP_RAW_POST_DATA, and php://input Android Low Memory Killer