HTML5自定义元素的使用

时间：2014-7-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,从而将交互性提高到一个全新的水平.