anchor.diff:  ----
   
   [source,css]
  -.src/app/app.component.css
  +.src/app/my-project.component.css
   ----
   paper-input,
   vaadin-combo-box {
  
positive.code: [source,javascript]
  .config/karma.conf.js
  ----
      files: [
        ...
        'dist/bower_components/webcomponentsjs/webcomponents-lite.js',
        'dist/elements.html'
  
negative.code: == Using Polymer Elements
  
  Now that everything is set, we can add any polymer elements to our application using their element names in templates, and the [classname]#PolymerElement# directive in code.
  For example, modify the [filename]#src/app#my-project.component.html# to have the following code:
  
  [source,html]
  .src/app/my-project.component.html
  ----
  <h3>{{title}}</h3>
  <vaadin-combo-box [label]="myLabel" [(value)]="myValue" [items]="myItems"></vaadin-combo-box>
  <paper-input [(value)]="myValue"></paper-input>
  ----
  
  And set the code in the [filename]#src/app/my-project.component.ts# file to use the new elements:
  
  [source,typescript]
  .src/app/my-project.component.ts
  ----
  import { Component } from '@angular/core';
  import { PolymerElement } from '@vaadin/angular2-polymer';
  
  @Component({
    moduleId: module.id,
    selector: 'my-project-app',
    templateUrl: 'my-project.component.html',
    styleUrls: ['my-project.component.css'],
    directives: [
      PolymerElement('vaadin-combo-box'),
      PolymerElement('paper-input')
    ]
  })
  export class MyProjectAppComponent {
    title = 'my-project works!';
    myLabel='Select a number'
    myValue = '4';
    myItems = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
  }
  ----
  
  Finally, you can use Polymer custom CSS properties and custom CSS mixins either: in the [filename]#my-project.component.ts# file for the scoped styles, or in the [filename]#index.html# file for the global ones.
  In the following example we use mixins and properties defined in the Paper [elementname]#color# and [elementname]#typography# elements.
  
  [source,html]
  