HTML 自定義元素教程

組件是Web開發的方向，現在的熱點是JavaScript組件，但是HTML組件未來可能更有希望。

本文就介紹HTML組件的基礎知識：自定義元素（custom elements）。

瀏覽器處理

我們一般都使用標準的HTML元素。

上面代碼中，

就是標準的HTML元素。

如果使用非標準的自定義元素，會有什麼結果？

上面代碼中，就是非標準元素，瀏覽器不認識它。這段代碼的運行結果是，瀏覽器照常顯示Hello World，這說明瀏覽器並沒有過濾這個元素。

現在，為自定義元素加上樣式。

運行結果如下。

接著，使用腳本操作這個元素。

運行結果如下。

這說明，瀏覽器對待自定義元素，就像對待標準元素一樣，只是沒有默認的樣式和行為。這種處理方式是寫入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對象，所有自定義元素都是該對象的實例。

上面代碼中，tabs是一個自定義元素，同時繼承了

HTMLUnknownElement

和HTMLElement介面。

HTML import

有了自定義元素，就可以寫出語義性非常好的HTML代碼。

上面的代碼，一眼就能看出語義。

如果將元素的樣式與腳本，封裝在一個HTML文件share-buttons.html之中，這個元素就可以復用了。

使用的時候，先引入share-buttons.html。

然後，就可以在網頁中使用了。

HTML imports的更多用法可以參考教程（1，2）。目前只有 Chrome 瀏覽器支持這個語法。

Custom Elements 標準

HTML5標準規定了自定義元素是合法的。然後，W3C就為自定義元素制定了一個單獨的Custom Elements標準。

它與其他三個標準放在一起——HTML Imports，HTML Template、Shadow DOM——統稱為Web Components規範。

目前，這個規範只有Chrome瀏覽器支持。

Custom Elements標準對自定義元素的名字做了限制。

"自定義元素的名字必須包含一個破折號（-）所以、和都是正確的名字，而和是不正確的。這樣的限制使得HTML解析器可以分辨哪些是標準元素，哪些是自定義元素。"

注意，一旦名字之中使用了破折號，自定義元素就不是HTMLUnknownElement的實例了。

Custom Elements標準規定了，自定義元素的定義可以使用ES6的class語法。

上面代碼中，原生的

window.customElements

對象的define方法用來定義Custom Element。

該方法接受兩個參數，第一個參數是自定義元素的名字，第二個參數是一個ES6的class。

這個class使用get和set方法定義Custom Element的某個屬性。

有了這個定義，網頁之中就可以插入了。

處理腳本如下。

運行結果如下。

ES6 Class的一個好處是，可以很容易地寫出繼承類。

今天的教程就到這裡，更多用法請參考谷歌的官方教程。

參考鏈接

1. John Negoita, Extending HTML by Creating Custom Tags

https://code.tutsplus.com/tutorials/extending-the-html-by-creating-custom-tags--cms-28622

2. StackOverflow, Are custom elements valid HTML5?

https://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5

3. Eric Bidelman, Custom Elements v1: Reusable Web Components

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

作者：阮一峰

文章來源：

http://www.ruanyifeng.com/blog/2017/06/custom-elements.html?utm_source=tuicool&utm_medium=referral

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！