html5自定義元素的使用
作者:佚名 時間:2014-07-17 分享到:
盡管裝飾有利于為元素添加額外的顯示標記,但如果想要進行更多后續的更改操作,則需要使用自定義元素.自定義元素與裝飾之間的關鍵區別是:裝飾是暫時的,通過修改一個屬性或選擇器,它們可以被應用或移除;而自定義元素卻是固定的,它們適用于dom被解析新的情況,而且只能通過編寫腳本來進行修改成移除.
自定義元素類似于替代或增強一個標準元素的擴展模板,自定義元素可以通過element元素被創建,這個元素有一些新屬性,這些屬性在后文中進行了介紹.在eldment元素內部,可以使用新標記來添加一個template元素,或范圍樣式,甚至還可以添加一個腳本.
如果上述內容聽起來有些令人困惑,那么可以仔細閱讀下面的示例說明.下面的代碼片段展示了一個簡單的救命,一個含有template的element,而這個template包含有一個div,這個div含有11.1.2裝飾所介紹的content元素.
<element extents="button" name="x-foobutton">
<template>
<div id="foo">
<content></content>
</div>
</template>
</element>
一旦定義了自定義元素,則可以將其應用于一個含有js屬性的現存元素.這個js屬性被應用于擴展的元素,并使用自定義元素name屬性的唯一標示符作為值.事實上,這并不想聽起來那樣的復雜.
自定義元素與裝飾的主要區別是標記的性能,這個差異的一個好處是,腳本可以包含在一個一直存在的自定義元素中,這意味著甚至可以為每個自定義元素定義一個強制api,從而將交互性提高到一個全新的水平.