Angular: merkwürdige Selector-Veränderung

[7-it]

Ich arbeite mich gerad in Angular ein.

app.component.ts

<div style="text-align:center">
    <h1>
    {{ appname }} {{ version }}
    </h1>
</div>

<app-canvas></app-canvas>

<!--
<canvas></canvas>
-->

Ich habe mir eine kleine canvas componente erstellt

./canvas/canvas/canvas.component.ts

import { Component, OnInit } from '@angular/core';
/
@Component({
selector: 'app-canvas',
templateUrl: './canvas.component.html',
styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

./canvas/canvas/canvas.component.html

<p>
    canvas works!
</p>

wenn ich dieses ausführe, funktioniert es einwandfrei. Ändere ich jetzt den Selektor der Canvas Componente auf "canvas", und den Tag von app.component.html von "<app-canvas>" auf "<canvas>", so funkioniert es nicht mehr. Genauer gesagt die Komponente wird nicht aufgelöst. Dieses verwundert mich etwas. Weis einer woran dieses liegt?

[tomBuilder]

Wieso willst Du aus einem HTML Element eine Angular Comeponente machen ?

Ich hatte es soi verstanden, dass für AngularComponenten die Regeln von benutzerdefinierten Html Elemnten gelten:

https://developer.mozilla.org/de/doc...ustom_elements

https://developers.google.com/web/fu...customelements

[hellbringer]

Komponentennamen sollten immer einen Prefix haben. Das ist auch von Angular so empfohlen, wenn nicht sogar vorgeschrieben.

Also <app-canvas>, <foobar-canvas> usw. sind OK.