1

I recently received the following comment:

Are these custom attributes (dw-filter et al) going to be valid across all browsers? Goes against the data-* convention.

Arguably, now that angular is becoming more prevalent on the web it's fairly common to find something such as:

<a _ngcontent-c2 class="col-1-4" ng-reflect-router-link="/detail/13" href="/preview/cj9t4xj0v00113c5sw2c8s6w8/detail/13">
    <div _ngcontent-c2 class="module">
      <h4 _ngcontent-c2>Bombasto</h4>
    </div>
</a>

The W3 HTML5 spec explicitly states that:

https://www.w3.org/TR/html5/dom.html#custom-data-attribute: A custom data attribute is an attribute in no namespace whose name starts with the string "data-"

Angular applications always fail w3 validation due to this, even though very simple arbitrary custom attributes (some-attr="1") still work in all HTML5 browsers without complaint / error.

Do websites (angular or not) which use such custom attributes really need to honor this part of the specification anymore?

Zze
  • 18,229
  • 13
  • 85
  • 118

1 Answers1

0

ng- attributes are not part of the HTML specification. Therefore, they are invalid markup. Proper custom attributes should begin with data- as specified in the current HTML5 specification. Angular attributes do not do that and fail most, if not all validators.

Failing to follow web standards is a risk that has caused issues in the past and now. Should an attribute become popular with some other group, or even become a standard in the future, will cause problems for anyone trying to establish their own. For whatever reason, WHATWG or the W3C decide to make ng- an attribute for a security property, every Angular application ever made will face an uncertain future.

Not to mention adding confusion to the web as witnessed by this question.

Always, always write valid markup.

Commentary:

Why Angular intentionally violates HTML standards, I do not know. (Note: see the reply from @angular in the comments.) Unfortunately, I see articles online where developers say, "So what?", and that, to me, smacks of the days of Microsoft browsers before competition from Firefox and, then, Chrome from Google, the developers of Angular, which boasted of standards compliance.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • 1
    Not entirely true. You can do `data-ng-app` For example so Angular can be made html5 compliant – dmeglio Nov 10 '17 at 01:07
  • @dman2306 Yes you can but that is not the subject. I did mention the `data-` attribute in my answer. – Rob Nov 10 '17 at 01:07
  • 1
    I think what @dman2306 means is that statements like "Angular attributes do not do that" and "Angular intentionally violates HTML standards" are not entirely accurate. You can use data-* prefix for all the directives. "This will give template creators great flexibility to consider the tradeoffs between html code validity and code conciseness and pick the syntax that works the best for them." -- [angular @ github](https://github.com/angular/angular.js/blob/master/CHANGELOG.md#compile-rewrite) – showdev Nov 10 '17 at 01:19