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是一個自定義元素，同時繼承了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（阮一峰）
HTML 自定義元素教程