組件是 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是一個自定義元素，同時繼承了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>
上面的代碼，一眼就能看出語義。
如果將<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 的更多用法可以參考教程（1，2）。目前只有 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使用get和set方法定義 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);
今天的教程就到這里，更多用法請參考谷歌的官方教程。
四、參考鏈接
- John Negoita, Extending HTML by Creating Custom Tags
- StackOverflow, Are custom elements valid HTML5?
- Eric Bidelman, Custom Elements v1: Reusable Web Components
（正文完）轉載自：http://www.ruanyifeng.com/blog/2017/06/custom-elements.html（阮一峰）