Consequences of Custom HTML Tags in AngularJS Directives

Question

Say I wrote a custom gravatar directive in AngularJS that is bound to an email property on the scope. The directive would replace this HTML …

Answer 1

While the initial source of the page body (before angular processes an ng-app element) may not adhere to the W3C standards, if you use "replace: true" in directives, custom elements are replaced by a template HTML, which can be valid. So, in this case, you can think about an angular element as just a placeholder that is replaced with the terminal HTML output.

Answer 2

The W3C says

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

and

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

http://www.w3.org/html/wg/drafts/html/master/dom.html#elements

Custom elements/attributes have no semantic value and should be avoided for these reasons.

There probably won't be any direct consequences that you will even notice. After all, Angular itself uses the non-confirming ng attributes (although they do support with the data- prefix as well).

The only possible problem you may face is if the element you introduce that is currently a custom element becomes part of the spec and has different behavior than what you were expecting before, but I think that is highly unlikely. Even so, I would avoid using anything custom if I could.

Eventually you will be able to register your own custom elements, but from what I can tell no browser supports this spec yet.