Are custom elements valid HTML5?

 

I've been unable to find a definitive answer to whether custom tags are valid in HTML5, like this: 

<greeting>Hello!</greeting>

I've found nothing in the spec one way or the other:

http://dev.w3.org/html5/spec/single-page.html

And custom tags don't seem to validate with the W3C validator.

The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash ( - ). So <x-tags> , <my-element> , and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

  • A "gallery" of Web Components is being compiled at http://customelements.io/
  • WebComponents.js serves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.

    • This is actually a consequence of the accumulation of the content model of the elements.

    For example, the root element must be an html element.

    The html element may only contain A head element followed by a body element.

    The body element may only contain Flow content where flow content is defined as the elements: a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (if the scoped attribute is present), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr and Text

    and so on.

    At no point does the content model say "you can put any elements you like in this one", which would be necessary for custom elements/tags.

    It's possible and allowed:

    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.

    http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

    But, if you intend to add interactivity, you'll need to make your document invalid (but still fully functional) to accomodate IE's 7 and 8.

    See http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (my blog)

    链接地址: http://www.djcxy.com/p/60732.html

    上一篇: 将mp3从服务器流式传输到html5音频时传递持续时间

    下一篇: 自定义元素是否为有效的HTML5？