2

When inspecting the DOM on a web page created by Angular I see many non-standard HTML elements. E.g. inspect the Angular documentation on custom elements. What are these non-standard HTML elements? Examples of non-standard elements in the link: aio-shell and mat-toolbar.

The closest thing I can think of is custom elements from web components but I haven't found documentation that states all Angular components will automatically be compiled to custom elements. Angular supports creating custom elements but from the documentation it seems one has to import @angular/elements and call createCustomElement and I have a project where I have done neither of these and still see the non-standard HTML elements in the DOM.

I can mention that I am used to React which as far as I know only outputs standard HTML elements.

Stian Jørgensrud
  • 662
  • 6
  • 14
  • 1
    Can you provide a specific example to your question? – J.Starkl Jan 12 '22 at 13:24
  • 1
    Maybe you are using a framework or a library (Material, Nebular, etc.) with custom components and that's what you seeing in inspect elements. – Qiimiia Jan 12 '22 at 13:28
  • @J.Starkl Updated question with the examples: aio-shell and mat-toolbar. I know the last one is probably from Material UI, so material UI are creating web components? – Stian Jørgensrud Jan 12 '22 at 14:27
  • 1
    `mat-toolbar` could be from [Angular Material](https://material.angular.io/components/toolbar/overview). Angular doesn't remove or replace non-standard HTML elements. You'll find all the components in the generated output. – jabaa Jan 12 '22 at 14:27
  • @Qiimiia I am using [Material UI](https://material.angular.io/), can't see web components mentioned in their docs, but I guess that could be the answer. – Stian Jørgensrud Jan 12 '22 at 14:29
  • @jabaa And Angular Material is (transpiled into) web components? The documentation doesn't mention it, which I find a bit strange. – Stian Jørgensrud Jan 12 '22 at 14:32
  • Web components are something different. You can create HTML components that can be used outside an Angular page. Each web component is packaged with its own Angular core. Web components have nothing to do with your current observation. You wouldn't use a web component in an Angular project. – jabaa Jan 12 '22 at 14:32
  • To make it short: _"Why are there non-standard HTML elements in compiled Angular code?"_ Because that's how Angular works. – jabaa Jan 12 '22 at 14:39
  • @jabaa I am more interested in the "what" instead of "why" so I updated the title. The reason I want to know is because it differs from other component libraries and I am afraid that Angular is doing something non-standard. Hopefully it is something standard, like web components. – Stian Jørgensrud Jan 12 '22 at 18:42
  • I don't see any problem. You are allowed to use non-standard tags in the supported browsers. In Angular.js, 6 years ago, there was a convention to use a `x-` prefix your own tags, e.g. ``, but AFAIK this convention was removed because all supported browsers support own tags. These tags could cause problems in IE, but Angular doesn't support IE and I don't know any developer supporting IE. – jabaa Jan 12 '22 at 19:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241016/discussion-between-stian-jorgensrud-and-jabaa). – Stian Jørgensrud Jan 12 '22 at 20:03

1 Answers1

0

Non-standard HTML elements are in fact allowed in HTML5. There is no need to define a custom element (from web components) for a custom element to show up in the DOM. More details here (under the section "Regarding The Validity of The Basic Syntax"): https://stackoverflow.com/a/34972064/6113915

The assumption the question made that non-standard HTML elements are invalid or bad is thus largely wrong, although this can be discussed. The linked SO post states "W3C strongly recommends against them" and the Extensibility paragraph in the HTML spec where custom elements are mentioned the paragraph is stated as "non-normative".

Stian Jørgensrud
  • 662
  • 6
  • 14