Angular uses shadow DOM to encapsule styles for it's components:
In Angular, a component's styles can be encapsulated within the component's host element so that they don't affect the rest of the application.
https://angular.io/guide/view-encapsulation
There is different ways of encapsulation ShadowDomand emulated. While the first one produces html standard conform code, the later does not:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<app-root _nghost-ng-c2283532919="" ng-version="17.1.3">
<h1 _ngcontent-ng-c2283532919="">Headline</h1>
</app-root>
<script src="polyfills.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>
Angular uses the _ngcontent-ng-c2283532919 attribute to identify the emulated shadow DOM, but the W3C validator fails on this.
The HTML standard described by WHATWG and W3C says:
3.2.6 Global attributes
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
...
https://html.spec.whatwg.org/multipage/dom.html#global-attributes
and
Custom data attributes (e.g. data-foldername or data-msgid) can be specified on any HTML element, to store custom data, state, annotations, and similar, specific to the page.
A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no ASCII upper alphas.
https://html.spec.whatwg.org/multipage/custom-elements.html
Angular uses the additional attributes without the data- prefix:
<h1 _ngcontent-ng-c2283532919="">
Even though the reason for this kind of solution seems convincing:
The main reason for that is that back in the day when Angular was created; most browsers were not supporting Shadow Dom.
Why does Angular use non standard HTML markup?
or
Why would this markup still be valid and are there any references why it would be?