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

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)


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.


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.


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.