Angular 2, using body as root selector, instead of my-app

Question

Are there any downsides of using the <body> tag instead of some <my-app> tag for the root component?

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';
}

(The code here is Dart, but I hope it is close enough to ES6, typescript for other people to understand.)

I don't see this often, so I guess there is a good reason for it, but this seems nice to me, otherwise you basically have two root components, body, and my-app.

score 6 · Accepted Answer · edited May 23 '17 at 11:54

6

If you want Angular to control the whole page just use body as selector. See also How do I change the body class via a typescript class (angular2)

edited May 23 '17 at 11:54

Community

1
1

answered Jan 25 '16 at 05:32

Günter Zöchbauer

623,577
216
2,003
1,567

Damsorian · Answer 2 · 2016-05-15T17:05:50.133

6

If you use 'body' as the selector for your app, it'll work, but there are some problems:

The Web Component specification say to use custom elements or custom attributes and it doesn't use official html elements.
The official style guide suggests to use 'custom prefix' for your components like 'myComponent'. Also if you want to use some linter like tslint with the 'component-selector-prefix' config in order to check that, it'll throw a warning for use 'body' selector without prefix.
If inside the selector (body) there are some elements, they'll be hidden for angular, maybe you'll want to put some 'scripts' inside the body or another component, for example 'webpack' put the scripts in the bottom of the body, and maybe it'll work but not as expected ...

Best.

edited May 15 '16 at 17:05

answered May 15 '16 at 16:32

Damsorian

1,664
2
14
10

1

Angular components are not custom elements. There are small advantages when the name conforms to the Web Components spec (has a `-`) but they don't mean much in Angular2. The prefix doesn't matter for the root component. This is just to avoid conflicts in tag names and CSS when several component libraries are used so you don't have two different components that both have the name ``. The last item is definitely valid. Angular will prune the content of the tag where the selector of the root component matches. – Günter Zöchbauer May 15 '16 at 18:09

score 2 · Answer 3 · answered Jan 25 '16 at 02:08

2

You can and nothing bad will happen (unless you have two body tags). Still, don't do it because:

Down side

The selector should reflect something unique to your app.

answered Jan 25 '16 at 02:08

basarat

261,912
58
460
511

3

I don't really see the down side, can you explain? – Kasper Jan 25 '16 at 13:20

score 1 · Answer 4 · answered Jan 24 '16 at 23:34

To be honest the framework is still very new and we don't really have an answer for that. That being said, technically I don't think there is anything that will break if you use <body> as the root element, though conceptually I think it puts you into a corner that you will eventually move back to using a custom root element later.

For example there may be some static styling or items that you would like on the page that angular does not control, but does not belong on <body> for example if using a CSS framework like bootstrap you may want to wrap your site in a class="container" or maybe have a static header or footer to the page that simply contains links. These could of course just as easily be handled in components as well.

Another item to consider is browser support, this might work very well in some browsers, but not in others, not sure yet.

So I guess the answer is "We don't know yet", as this was a pretty common practice with ng-app in the previous version, it might have been something that was thought about, though since most examples from the team show using a custom root element as the recommended way, there might be a reason for this that we don't yet know.

Further thoughts: What about using <html> as the root element... ? Who knows.

score 0 · Answer 5 · answered May 26 '19 at 23:03

All friends above are right about the down sides. But what about <body foo-root>?

import 'package:angular2/angular2.dart';
@Component(
    selector: 'body[foo-root]',
    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';
}

Angular 2, using body as root selector, instead of my-app

5 Answers5

Down side