[筆記]HTML5 registerElement

在開發一個網頁程式的時候，想必都會用到大量的div去完成一些特定的排版

在比較早的解決方案我們只能透過在各階層去bind指定的事件去做處理，可能是class或是依照id去針對個別的dom做畫面上的呈現。
那後面網頁就可能會長的像是這樣:

來源: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

後續在識別上也很難去針對網頁功能去做維護，於是在html5的草案中就提出了一個做法是說是不是可以針對開發者的需要去定義專屬的syntax？
像是hangout可能就可以像是這樣的表現方式：

<hangout-module>
  <hangout-chat from="Paul, Addy">
    <hangout-discussion>
      <hangout-message from="Paul" profile="profile.png"
          profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.</p>
        <p>Heard of it?</p>
      </hangout-message>
    </hangout-discussion>
  </hangout-chat>
  <hangout-chat>...</hangout-chat>
</hangout-module>

w3c後來也有針對這部份定義規格:
http://www.w3.org/TR/custom-elements/

後續也被一些主流瀏覽器所採用，像是webkit陣營的Chrome或是Gecko的Firefox，詳細的支援程度可以看下面的資料

https://developer.mozilla.org/zh-TW/docs/Web/API/Document/registerElement

就現在來說除了IE跟Safari沒有辦法支援，市面上主流的瀏覽器原則都可以用了，如果有針對自定義標籤有需要的話還是得注意一下跨瀏覽器支援喔！