Angular 5 - W3C markup validation

Question

I'm building Angular 5 application with Angular Universal. Currently I got a problem with W3C validation. The validator is showing errors on every attribute from Angular core.

For example, for code part like:

<span _ngcontent-c1="" class="sr-only">Toggle</span>

I'm getting error like:

Attribute _ngcontent-c1 not allowed on element span at this point.

I read about adding before Angular attributes data- prefix, but on Angular 5 it won't work (I think).

Is there any solution to remove it on server side using Angular Universal, or is there any external tool?

You should read a description. I think it won't work with Angular 5. Gr — Patryk Panek
Related discussion at stackoverflow.com/questions/18607437/…. What we need is to get agreement on some standard syntax for custom-attribute names. Some proposals have been discussed at github.com/whatwg/html/issues/2271 but there’s been no resolution yet. If/when the HTML spec defines some standard syntax for custom attributes, I could update the W3C HTML checker to recognize them. In the meantime, you can use the message-filtering feature (button) in the checker UI to persistently (using localstorage) filter out those errors — sideshowbarker

Rashid Husain Rashid Husain · Accepted Answer · 2020-01-09T09:45:21

Angular provide these _ngcontent-c1, _ngcontent-c2 attribute added to specific DOM elements with styles.

_ngcontent-c1 is used unique identity when rendered from server. when we do ViewEncapsulation.Emulated and it's the default behaviour of angular.

If you don't want such kind of attribute so you can add ViewEncapsulation.None or ViewEncapsulation.Native.

eg.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Angular 5 - W3C markup validation

1 Answers