anchor.diff:  paper-input
   paper-material
   paper-ripple
  -paper-scroll-header-panel
   paper-styles
  -paper-toolbar
   polymer
   vaadin-date-picker
   vaadin-grid
  
positive.code: @Component({
    selector: 'my-app',
    template: `
      <paper-scroll-header-panel fixed>
        <paper-toolbar [class.raised]="isInChildView">
          <paper-icon-button icon="arrow-back" *ngIf="isInChildView" (click)="goBack()"></paper-icon-button>
          <div class="title">{{title}}</div>
        </paper-toolbar>
        <router-outlet></router-outlet>
      </paper-scroll-header-panel>
    `,
    styles: [`
      paper-scroll-header-panel {
        height: 100%;
      }
  
      paper-toolbar.raised {
        @apply(--shadow-elevation-4dp);
      }
  
      paper-toolbar paper-icon-button {
        margin-left: -8px;
        margin-right: 24px;
      }
  
      paper-toolbar .title {
        margin-left: 56px;
      }
  
      paper-toolbar paper-icon-button + .title {
        margin-left: 0;
      }
    `],
    directives: [
  
negative.code: @Component({
    selector: 'my-app',
    template: `
      <app-header-layout has-scrolling-region>
        <app-header fixed>
          <app-toolbar>
            <div title spacer>All heroes</div>
          </app-toolbar>
        </app-header>
        <div>My application content</div>
      </app-header-layout>
    `,
    styles: [`
      app-toolbar {
        background: var(--primary-color);
        color: var(--dark-theme-text-color);
      }
    `],
    directives: [
      PolymerElement('app-header-layout'),
      PolymerElement('app-header'),
      PolymerElement('app-toolbar')
    ]
  })
  export class AppComponent { }
  