typescript - Angular 2, usando body como selector raíz, en lugar de my-app

¿Hay algún inconveniente en usar la etiqueta <body> en lugar de alguna etiqueta <my-app> para el componente raíz?

import 'package:angular2/angular2.dart';
@Component(
    selector: 'body',
    template: '''
      <h1>My First Angular 2 App</h1>

      <div>{{greet}}</div>
    ''',
    styles: const ['''
      :host {
        height: 100vh;
      }
      h1 {
        color: red;
      }
    '''])
class AppComponent {
  String greet = 'Hello world';
}

(El código aquí es Dart, pero espero que sea lo suficientemente cercano a ES6, TypeScript para que otras personas lo entiendan.)

No veo esto a menudo, así que supongo que hay una buena razón para ello, pero esto me parece agradable, de lo contrario básicamente tienes dos componentes raíz, body y my-app.

Respuesta #1

Si quieres que Angular controle toda la página, simplemente usa body como selector. Vea también Cómo cambiar la clase del body mediante una clase de TypeScript (angular2)

Respuesta #2

Si usas 'body' como el selector para tu aplicación, funcionará, pero hay algunos problemas:

• La especificación de Componentes Web dice usar elementos personalizados o atributos personalizados y no utiliza elementos HTML oficiales.

• La guía de estilo oficial sugiere usar 'prefijo personalizado' para tus componentes como 'myComponent'. Además, si deseas usar algún linter como tslint con la configuración 'component-selector-prefix' para verificar eso, generará una advertencia por usar el selector 'body' sin prefijo.

• Si dentro del selector (body) hay algunos elementos, estarán ocultos para Angular, tal vez quieras poner algunos 'scripts' dentro del body u otro componente, por ejemplo, 'webpack' pone los scripts al final del body, y tal vez funcione pero no como se espera...

Mejor.