adam bien's blog

Angular 2 replaces / generates a "synthetic" tag for each component without any styling with the name specified in the selector

The component below:

import { Component } from '@angular/core';
@Component({
  selector: 'hello-app',
  template: '<h1>Styling the host component</h1>',
})
export class AppComponent { }

<hello-app>
 <h1>Styling the host component</h1>
</hello-app>

Additional styling of the "host" tag can be added with the host object:

import { Component } from '@angular/core';
@Component({
  selector: 'hello-app',
  template: '<h1>Styling the host component</h1>',
  host: {"class":"nice"}
})
export class AppComponent { }

<hello-app class="nice">
	<h1>Styling the host component</h1>
</hello-app>

Putting the selector into angle brackets: selector: '[hello-app]' searches for an attribute, not a tag, with the name of the selector, e.g.:

<div hello-app></div>